Vertically Centering Content

Anyone who has ever tried to vertically center content using css knows how difficult it can be. This article will explain three common ways vertically centering content can be achieved.

Technique #1: height and line-height

The idea behind this is that you set the height and line-height of the element you wish to vertically center to the height of the element you want to center it within.

Here’s an example that should better illustrate this technique:

HTML

<div>
<p>This content is vertically centered!</p>
</div>

CSS

div {
height:150px;
background-color:red;
}

p {
height:150px;
line-height:150px;
text-align:center;
}

Note: The text-align:center on the paragraph tag is just to horizontally center the text. It isn’t required in order to vertically center.

This technique works well when the text fits on one line. Unfortunately, if the text is more than one line, it will no longer be centered. This is because the line height of both lines of text is 150px so the second line will end up outside of the box you are trying to center it in. Additionally, if the height of the div changes and the line-height and height of the text doesn’t, it will no longer be centered.

To view the codepen for this example, click here.

Technique #2: flexbox

An alternate technique that works very well with few drawbacks is flexbox. In order to vertically center the content, you have to set display:flex on the parent element as well as align-items:center. Alternatively, you could also just set display:flex on the parent and margin:auto to the child if you want the text horizontally centered.

Again, here is an example illustrating this technique:

HTML

<div>
<p>This content is vertically centered!</p>
</div>

CSS

div {
height:150px;
background-color:red;
display:flex;
align-items:center;
}

OR

div {
height:150px;
background-color:red;
display:flex;
}
p {
margin:auto;
}

The only problem with this is that not all browsers support flexbox. It is not supported on IE8 and earlier and only has partial support in IE11 and Android Browser. For more information on flexbox support, please visit http://caniuse.com/#feat=flexbox.

The codepen for this example is here.

Technique #3: positioning and transform-translate

Last but not least is positioning! This is the best solution to the vertical centering problem in my opinion as it works with multiple lines of text AND has universal browser support.

In order to use this technique, you have to position:relative the text you want to center, add top:50%, and then add transform:translateY(-50%). This will also work with position:absolute and position:fixed.

Here is an example of this technique in action:

HTML

<div>
<p>This content is vertically centered!</p>
</div>

CSS

div {
height:150px;
background-color:red;
}
p {
position:relative;
top:50%;
transform:translateY(-50%);
text-align:center;
}

Note: As before, the text-align:center on the paragraph tag is just to horizontally center the text and is not required in order to vertically center your content.

To view the codepen for this example, click here.

And there you have it! While sometimes it may seem impossible to get something vertically centered, there is always a way to do it.

Note: If you’ve tried everything and are unable to get something centered, a great site to check out is http://howtocenterincss.com. All you have to do is answer a few simple questions about what you’re trying to center and it will provide you with the code you need!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.