All I want to do is center some divs on the page. The outer one is a fixed size and is centered horizontally via margin: 0 auto. Inside that div I have a couple images side by side inside another div that wraps to their size. I want to center that div both vertically and horizontally inside the outer div.
It seems like a simple enough thing to want to do, no?
Update:
Let me bit a bit clearer as to what exactly the problem is. I’d love to use the display: table-cell trick to enable vertical-align: middle but the problem is that when I do this, the div shrinks down to the size of its content, thus not offering any space for centering at all, and that div is just stuck up in the top left corner of the parent. I need my display: table-cell block to fill up the available space of the containing div so it has room to center its contents.
Update 2: Solved!
Turns out the problem was that I didn’t have the display: table-cell block contained in a div that was set to display: table. I’m not entirely sure how display: table differs from display: block, but it’s apparently a necessary step. It appears to be working now!
This might help:
http://www.vanseodesign.com/css/vertical-centering/