How to center vertically and horizontally using CSS3 transform


/ Published in: CSS
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.