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?
