Why does display:table-cell not center content without display:table?

Posted by Samuel on Pro Webmasters See other posts from Pro Webmasters or by Samuel
Published on 2012-06-08T16:02:11Z Indexed on 2012/06/08 16:49 UTC
Read the original article Hit count: 487

Filed under:
|
|

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?

© Pro Webmasters or respective owner

Related posts about html

Related posts about css