Posted By

CreativePunch on 01/14/14


Tagged

csscss3slicingwebdevwebdesigncenterverticalhorizontalclassclasse


Versions (?)

How to center vertically and horizontally using CSS3 transform


 / Published in: CSS
 

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

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.

  1. .centerme {
  2. margin: 0 auto;
  3. display: table;
  4. position: relative;
  5. top: 50%;
  6. -webkit-transform: translateY(-50%);
  7. -moz-transform: translateY(-50%);
  8. -o-transform: translateY(-50%);
  9. -ms-transform: translateY(-50%);
  10. transform: translateY(-50%);
  11. }

Report this snippet  

You need to login to post a comment.