Why does display:table-cell not center content without display:table?
- by Samuel
I'm looking for the most efficient (or elegant) way to vertically and horizontally center content of variable height. I've come up with this: http://cssdeck.com/t/2veysdkg/16, which uses css tables to vertically center the main content.
My demands for writing this particular piece of code were:
Must be able to center variable and fixed width content vertically and horizontally
Centered content must be inside the normal document flow (so no overlapping)
Sticky footer and normal header of 100% width
As few hacks, ugly code or non-semantic html as possible
I didn't care about support for IE6, IE7 (I'll use a different stylesheet for them)
The weird thing is that the demands above are only met when the header and footer are set to table-row, and the body-tag to display:table. Which is weird because as I understand it the css will generate anonymous table elements when parent table elements are missing. So table-cell should work without all the surrounding elements, but yet I've not been able to make it work.
If it were up to me I would prefer to not mess with the display mode for the body tag, and leave the header and footer on display:block. But I've not been able to make it work. Does anyone understand why this doesn't work?
