Return to Snippet

Revision: 65742
at January 14, 2014 06:15 by CreativePunch


Initial Code
.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%);
}

Initial URL
http://creative-punch.net/2014/01/center-vertically-horizontally-using-css3-transform/

Initial Description
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.

Initial Title
How to center vertically and horizontally using CSS3 transform

Initial Tags


Initial Language
CSS