It might not have gone exactly like this. Maybe, just maybe, I’ve embellished the tale.

You see, my colleague Ricardo — the bulky, bearded guy — is a self-confessed CSS dummy. He once told me he was still using <center> in his markup. In terms of CSS vertical align mastery he is a dummy.

Anyway, getting your content correctly aligned, pretty and basically awesome isn’t an easy chore in CSS. I’ve seen enough people struggling with it, and I keep spotting some “critical” errors in the wild, when it comes to true responsive design.

But fear not: if you’ve been struggling with CSS vertical align — like my colleague may have been — you’ve come to the right place.

Let’s Talk About the CSS Vertical Align Property

When I started working in front-end development, I had a little trouble with this property. I thought it should be used like the classic text-align property. Oh, if only it were that simple…

The CSS vertical align property works smoothly with tables, but not with divs or any other elements. When you use it in a div, it aligns the element alongside the other divs and not the content — which is what we usually want. This only works with display: inline-block; .

Here’s an example:

We Want to Center the Content, Not the Div Itself!

You have two approaches. If you only have some div elements with text — like a navbar — you can use the line-height property — which means you need to know the height of the element, but you don’t need to set the height. This way your text will always be centered.

This approach has a catch, though. If your text has more than one line, the line height will be multiplied by the number of lines you have. This will probably leave you with an ugly page on your hands, and no one wants that.

Have a look at this example:

If the content you want to center has more than one line, the best approach is to use div tables. You could use real tables, but that’s not semantically correct. Also, if you need breaks for responsive purposes, you’re better off using div elements.

For this to work, you need to have a parent container with the display: table; property, and inside that container you will have the number of columns you want to have centered, with the display: table-cell; (and vertical-align: middle; ) property.

Let’s look at an example:

Why does this work with the table layout and not with div elements? Because when you have a table, the rows have the same height. So, when the content in the cell doesn’t use all the available height space, the browser automatically adds a vertical padding to center your content.

The Position Property

Let’s start with the basics:

position: static; — this is the default value. The element is rendered following the order of the HTML.

— this is the default value. The element is rendered following the order of the HTML. position: absolute; — used to define the exact position the element needs to be in. This position is always related to the closest ancestor in a relative position (not static). Do you know what happens if you don’t define the exact position of the element? You lose control over it! It is rendered randomly, completely disregarding the document flow. By default it’s displayed in the upper left corner.

— used to define the exact position the element needs to be in. This position is always related to the closest ancestor in a relative position (not static). Do you know what happens if you don’t define the exact position of the element? You lose control over it! It is rendered randomly, completely disregarding the document flow. By default it’s displayed in the upper left corner. position: relative; — used to position the element relative to its normal position (static). This position keeps the flow order of the document.

— used to position the element relative to its normal position (static). This position keeps the flow order of the document. position: fixed; — used to position the element relative to the browser window, so it is always visible in the viewport.

Note: Some properties like top and z-index only work if the element has a position (not static).

Let’s Get Our Dirty Hands Dirtier!

Do you want to align a box with the center of your page?

First get an element with a relative position and the dimensions you want. For example: 100% width and height.

The second step may be different depending on your target browsers, but you can use one of two choices:

Old school option: You need to know the exact size of your box to remove half of the width and half of the height of the box. Like this:

Cool new CSS3 option: Add a transform property with a translate value of -50% and it will always be centered. Like this:

Basically, if you want to center content, never (ever, ever, ever!) use top: 40% or left: 300px . This works perfectly on your test screens, but it’s not centered. Not really.

Remember the fixed position? You can do the exact same thing you did with the absolute position, but you don’t need the relative position in the parent — it will always be relative to the browser window.

CSS Vertical Align Criers: Have You Heard About Flexbox?

You can use the flexbox layout, an option that my boy Dinis wrote about some time ago. Oh yeah, it’s far better than any of the other available options. With flexbox, manipulating elements in different ways is child’s play. Even Ricardo could do it.

The problem is that you need to let go of some browsers, like IE9 and below. Let it go. Let it go… can’t hold it back anymore. (Yeah, now it’s stuck inside your head. You’re welcome.)

Here is an example of how to vertically center a box:

Using the flexbox layout, you can have more than one centered box and have it correctly aligned. But that’s a story for another time!

No More CSS Vertical Align Tears

Vertical alignment can be pretty much like Johnson’s Baby Shampoo: tear free. If you follow what you learned with these few examples, you can master vertical alignment in no time, too.