Advanced Search

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