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%);
That’s it!
I hope you have enjoyed this quick little trick. Don’t forget to like and follow this blog on your favorite social media!