Simply Put the agency blog

Vertically center content with CSS

January 31st, 2008 by Verne

A convenient benefit of using tables is the ability to vertically center content within a cell using the valign attribute. Unfortunately, acheiving the same effect with CSS isn’t so convenient. So, as we continue to move towards tableless structures, there comes a need for a simple and valid CSS alternative. There have been a number of ways to approach this feat, but in this tutorial, I will lay out the technique we use to vertically center content using CSS.

The HTML

Three divs are required in order to pull this one off. Here’s an example of how we setup the divs.

<div id="container">
<div id=”position”>
<div id=”content”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet egestas mi. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse potenti. Suspendisse potenti. Vestibulum mi nibh, hendrerit nec, feugiat vitae, feugiat a, nisl.
</div>
</div>
</div>

The #container div is used as the main reference point for centering the content. In other words, the content will be vertically centered against the height of the #container div.

The #position div is used to, naturally, position the content.

Finally, the #content div is used to encase the actual content that we are trying to center. This div is also used to correct the positioning of the content for Internet Explorer users (as you’ll see later).

The CSS

Here’s the CSS we apply to make it all come together:

<STYLE type="text/css">
#container { width: 100%; height: 100%; display: table; }
#position { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }
</STYLE>

We’ve defined the height of #container to be the full height (100%) of the page. We could have just as easily given it a fixed height such as 500px. We’ve also added display: table and display: table-cell to #container and #position, respectively, which will tell it to mimic the properties of <table> and <td>.

You’ll notice that we haven’t applied any style to the #content div. This is because browsers like Firefox and Safari are able to use the uber handy vertical-align: middle property, making it almost just as easy as using tables. Using only the code we’ve shown thus far, our content should be nicely vertically centered on the page in all browsers except Internet Explorer, which doesn’t understand vertical-align: middle.

To correct this problem and ensure that our content is still vertically centered for IE users, we’ll apply the following conditional statements and extra bits of CSS.

<!--[if IE]>
<STYLE type="text/css">
#container { position: relative; }
#position { position: absolute; top: 50%; }
#content { position: relative; top: -50%; }
</STYLE>
<![endif]-->

The <!--[if IE]> ... <![endif]--> tags tell the browser to only process this CSS if the browser being used is Internet Explorer.

When processed, the CSS places the top margin of the #position div halfway down the height of #container. However, this only places the content in the lower half of #container. So, to center it vertically, #content’s top is offset by -50%. That is, it is being shifted upwards a distance that is equal to 50% of its height. If you do the math and crunch the numbers in your head, you’ll find that this does a nice job of centering the content.

Live Demo

A live demo of this tutorial is available here. You can also download the demo page for your reference.

Tags: ,

33 Responses to “Vertically center content with CSS”

Leave a Comment