5 Different Ways To Vertically Align Your CSS Content

A look into various CSS approaches to designing your web pages

Photo by Pankaj Patel on Unsplash.

Vertical alignment has been always been one of those daily problems to deal with. Back in the day, it was a constant headache for developers. Luckily, with the new layouts like Flex and Grid, it has now become a trivial task. Nevertheless, it’s always good to know your options when dealing with a problem.

Let’s look at all the tools we have available to deal with vertical alignment. Even though some are not the most useful, learning them may improve your understanding of CSS.

1. Table

Not long ago, the Table layout was one of the most popular layouts used in HTML. By using the display property, you can force some non-<table> elements to behave like them.

Here is a list of the display table-related values:

Let’s code our first solution using the values above:

To do the vertical alignment, we are using the vertical-align property of the CSS Table.

“The vertical-align property can be used in two contexts

- To vertically align an inline element’s box inside its containing line box. For example, it could be used to vertically position an <img> in a line of text.

- To vertically align the content of a cell in a table.” — MDN Web Docs

Note that vertical-align does behave differently on block vs. table elements. That’s why if you try to use it to center elements on a div, it won’t do anything.