Centering A Div Vertically and Horizontally with CSS3

2014-04-07 08_51_21-Shapemaker_ Enjoy Shapes

Historically, centering a div tag in CSS and HTML has been difficult due to idiosyncrasies in the way certain browsers (IE, I’m looking at you) have handled CSS.

However, as we approach the half way point of this decade, Mozilla and Chrome have become the defacto standard, and it is a lot easier.

To center a div in CSS3, you must

  • Define a width and a height
  • Set position to absolute
  • Set top, bottom, left and right to 0
  • Set margin to¬†auto
.centeredXY {
  width: 500px;
  height: 400px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

Have fun!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>