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.
How to Achieve Equal Column Heights Using CSS
Traditionally, websites feature a main content area and a sidebar. Often, the main content is longer than the... Read more
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
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.