Putting display:table; inside .outer-wrapper seemed to work…
JSFiddle Link
EDIT: Two Wrappers Using Display Table Cell
I would comment on your answer but i have too little rep 🙁 anyways…
Going off your answer, seems like all you need to do is add display:table; inside .outer-wrapper (Dejavu?), and you can get rid of table-wrapper whole-heartedly.
JSFiddle
But yeah, the position:absolute lets you place the div over the img, I read too quickly and thought that you couldn’t use position:absolute at all, but seems like you figured it out already. Props!
I’m not going to post the source code, after all its 99% timshutes’s work, so please refer to his answer, or just use my jsfiddle link
Update: One Wrapper Using Flexbox
It’s been a while, and all the cool kids are using flexbox:
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
stuff to be centered
</div>
Full JSFiddle Solution
Browser Support (source): IE 11+, FireFox 42+, Chrome 46+, Safari 8+, iOS 8.4+ (-webkit- prefix), Android 4.1+ (-webkit- prefix)
CSS Tricks: a Guide to Flexbox
How to Center in CSS: input how you want your content to be centered, and it outputs how to do it in html and css. The future is here!