Advanced Search

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.

Expand | Embed | Plain Text

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.