CSS Flexible Vertical and Horizontal Centering

Published 18th March 2011

After reading an article on 456 Berea St I’ve been inspired to share how to vertically and horizontally center things using CSS, post IE7. What I mean by that is this technique will work in IE8 and above but will not work in IE6 & 7.

It works by using the display:table; and display:table-cell; attributes to make the HTML elements act like a table when they are displayed. Here is the HTML.

<body> <div id="body"> Content goes here </div> </body>

And the CSS goes like this:

html, body { width:100%; height:100%; } html body { display:table-cell; vertical-align:middle; } #body { max-width:50em; margin:0 auto; }

Quite a cool trick and a far easier way to achieve this effect than was previously available. For more information on how this works and how you should use it read the article on 456 Berea St.