Finally solved: vertical aligning with CSS

One of the oldest problems of CSS seems to be vertical aligning. Although there is the well-known vertical-align property, you can’t just set vertical-align: middle for a block and everything inside gets centered vertically. While there is still no “one-property-solution” we have a broad selection of techniques which enable to center things vertically.

While struggling with this problem today by myself I’ve googled a little bit and found a pretty neat solution which uses a pseudo-element. I didn’t know this technique yet. When I toyed around a little bit with it, I remembered another solution, which is even easier and just needs an additional line-height, which has the same value as the height of the container. Nothing else. You can see both methods at my demo..

Of course there are still other ones, whereby the most recent (and maybe also the cleanest to date) is Absolute Centering. If you don’t need to care about older browser, you can also use CSS3 transformations to get the desired outcome.

So I think we can stop complaining now that there is no proper solution to vertically align stuff. I you still can’t get enough, you can find even more solutions further down the page here.

  • Archana S

    Very useful! Thanks for sharing

  • Curtis Scott

    Thanks for sharing! I have recently been using a very simple method for vertical aligning multiple elements within a parent container when the height of the container and children elements are all unknown. You can check out my example here – What do you think about this method?

    • Chris_Krammer

      This is also a very solid and proved method I have used a few times. “Faked” table layouts are generally very good to solve some layout problems, like a navigation, which is supposed to run across the whole page with varying elements. However there is a little problem I often encounter when using display: table-cell. This way the element looses its “block” capabilities, which can lead to some problems.