6 Ways to Align Content Vertically with CSS

Let’s discuss vertical alignment in CSS, or more accurately, how it’s not straightforward. CSS hasn’t provided an official method to center content vertically within its container. This issue has likely frustrated web developers globally. But fear not, in this post, we’ll share several tricks to help you simulate this effect.

However, these tricks might have limitations, and you might need to combine multiple methods to achieve the desired result. If you know any other tricks, please share them in the comments.

1. Use Absolute Positioning

The first trick we’ll explore involves the position property. Imagine you have two <div> elements: one as the container and the other as the child element containing the content.

First, set the container element’s position to relative. Then, set the child element’s position to absolute. This allows us to position it freely within the container.

To align it vertically, adjust the child element’s position from the top by half of the container’s height, and then pull it up by half of the child element’s width. Here’s how it looks:

This technique is ideal when there’s only one child element, as the absolute position will impact any other elements within the same container.

2. Use CSS3 Transform

CSS3 Transform simplifies the process of centering content. Unlike the position property, CSS3 Transform does not alter the positioning of other elements within the same container.

Using the same HTML structure as the previous method — one parent and one child element — positioning the child element 50% from the top and applying a CSS transform with a translation of -50% achieves the desired centering. Here’s the result:

However, remember that CSS3 Transforms are not supported in Internet Explorer 8 and earlier versions. You may need to use one of the other methods here as a fallback.

3. Use Padding

Another method involves using padding to create the appearance of vertical alignment. Simply set equal top and bottom padding like this:

This approach is ideal when the container’s width is not fixed and set to auto.

4. Use Line Height

For containers with a single line of text, vertical alignment can be achieved using the line-height property. Set the line-height approximately equal to the container’s height to see this effect:

It’s important to note that this method is effective only for a single line of text. If the content spans multiple lines, the spacing between lines will be equal to the line-height value, resulting in excessive whitespace.

5. Use CSS Table

My preferred method for vertical alignment is using CSS Table, especially because it’s compatible with older browsers like Internet Explorer 8. This technique involves setting the container element’s display to table and the child element’s display to table-cell. Then, apply the vertical-align property to center the content vertically.

6. Use Flexbox

The final method for vertical centering is by using Flexbox, a new module in CSS3. Flexbox simplifies the alignment process. To vertically center content in a flex container, just add align-items: center; as shown below:

However, be aware that Flexbox is only partially supported in some browsers. Therefore, similar to the CSS3 Transform method, ensure that your layout degrades gracefully in these browsers.