Austin Web Design Blog

How to Vertically Center Content in CSS

When web designers used to lay out sites using tables, vertically centering content was easy. If you’re trying to vertically center content that is not in a table, using "vertical-align:middle" in CSS will not work on other containing elements. Here are two easy fixes for vertically centering content in any block-level element.

Using display:table and display:table-cell

In the following example we will have some text we’d like centered in a div which is 200px by 200px. This first method requires we put an extra container around that text, and in this case we will add an extra div. In order to get this container to vertically center we will tell this div in CSS to behave like… a table cell!

In the HTML nest a div inside a div. Give the outer a class of wrap, and the inner a class of content. Here is the CSS you will add:

.wrap{width: 200px; height: 200px;border: 1px solid #ccc;display:table;}

The outer div is given display:table while the inner div is given display:table-cell and vertical-align:middle. The inner div does not require a height, so can be flexible and so styles easily reused. This works in all current versions of Safari, Firefox, Chrome, and Opera. It also works in IE9 & IE8. All in all, a pretty useful bit of code despite the fact that you will have to add that extra div.

Using positoning

In the second example, you will also need a div nested inside a div, so add the same classes as before. The outer div will need to be given position:relative while the inner div will need to be given position:absolute.

.wrap{border: 1px solid #ccc;width: 200px; height: 200px;position:relative;}
.content{width: 160px; height: 70px; position:absolute;top:50%;margin-top: -35px; border: 1px solid red;}

The the inner div will need to be given a height and a position of top: 50% which will make the content start half way down the box. Add the style margin-top and make this value the negative of half the height of the box. In this case the height is 70px, so the margin-top will be -35px. This inner box will also need a width, otherwise it will extend outside the margin of the containing box. An advantage to this method is it works in older versions of IE and other browsers as well as all current browsers, though it is a little more complicated. The big disadvantage is needing to calculate the height to correctly position.

Remember that different containers such as header tags or paragraph tags will have default margins and padding which may throw off your calculations. You may want to zero out margins and padding if you hadn’t already.

There are other methods as well, so if these two methods don’t work for you, you will need to venture and try another way. These, however, have been very useful for vertically centering most everything, and are very easy to implement.

Mon, 05 Dec 2011 10:14

Tags , , , , , , , , ,

Comment How to Vertically Center Content in CSS