Vertically Align Content with CSS

There are ways to vertically align content within a div so it publishes in the middle.

Note: This article discussed vertical centering with the CSS display and vertical-align properties. Another article, Vertical Content Centering With CSS, discusses vertical centering with the position property.

A little bit of history:

In the old days, a decade and a half ago, before I learned CSS, I used to vertically align content with a table td tag, using attribute valign="middle"

It still works, of course, like virtually all early HTML does. Although using CSS where possible is generally considered more acceptable by those who develop websites.

When CSS started to become accepted by the site-development community, way back when, I resisted it. "Why change something that already works?" was my argument. But the more I learned about it, the more I liked it. Now, I absolutely enjoy working with CSS.

Two years ago, we published Vertical Content Centering With CSS at Willmaster.com with techniques for vertical alignment of content. It uses the CSS position:absolute; declaration and utilizes the top and margin-top properties for aligning the content.

It has two techniques. One requires you know the height of the content at the time the HTML is coded. The other uses JavaScript to do the vertical alignment at the time the page is loaded.

This technique:

In this article, you'll find out how to use the CSS display:table-cell; and vertical-align:middle; declarations to vertically align content — even when the height of the content isn't known at the time the HTML is coded.

Here's an example:

And here's the source code of the example. Notes follow.

<div 
   style="
      display:table-cell; 
      height:100px; 
      width:100px; 
      text-align:center; 
      vertical-align:middle; 
      background-color:beige;
   ">
An<br>example.
</div>

Notes:

The two required CSS declarations are printed in blue. The rest are used to format presentation of the example.

The display:table-cell; declaration makes the div behave as though it was a table td container. The vertical-align:middle; declaration vertically aligns the content within the div. (Here's information about the display property.)

Unlike the text-align:center; declaration, which works in divs with any display property, the vertical-align:middle; declaration only works reliably in a div also containing the display:table-cell; declaration. (Here's information about the vertical-align property.)

Using this technique:

This technique can be useful and quick to implement when the display:table-cell; declaration can be used. If other display property values need to be used, like block, then a technique mentioned in Vertical Content Centering With CSS might be used.

There are a number of ways to vertically align content. Probably there's a way for any situation you encounter.

Will Bontrager