How to center vertically and horizontally using CSS3 transform

by Creative Punch · January 13, 2014

In this article I will show you how to center vertically and horizontally using CSS3 transform property. Centering horizontally is easy, but vertical alignment has always been a bit tricky with CSS.

I created a class for this that I called centerme which you can freely use in any project. You can also remove the horizontal alignment from it and keep only the vertical alignment.

A demo of this trick, together with the source can be found below.

Some more explanation

The actual class that centers an element vertically and horizontally is this:

.centerme {
    margin: 0 auto;
    display: table;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

I have applied this centering class to the container that has the image and the text. I have also added the centering class to the text itself.

Horizontal centering can be done simply by setting margin : 0 auto; and display: table;

Vertical centering, however is a bit more tricky. Luckily CSS3 comes to the rescue with the transform property (again)!

First, we lower the element vertically by 50% from the top of its parent container like this:

position: relative;
top: 50%;

Now the element will be positioned a bit too low. This is because we need to move the element up by 50% of its own height. We do this by using transform.

-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);