Question

I have a <div id="wrapper"> container in which my whole site content will be present. I have tried to make the div center vertically and horizontally by using css property like margin:0 auto; on #wrapper.

#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
}

By using above css i can make the div in (top center) of screen but how to make it center(vertically). when i zoom out in firefox my div is going to zoom out in top center but what i want it should be always present in the center of screen from both vertically and horizontally.

Can any one suggest me how can i get the layout like that.

Thanks in advance.

Answer 1

#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-250px;
 margin-top:-250px;
}

Demo: http://jsfiddle.net/fJtNQ/

Why is this working?

Well, basically you have an absolute positioned element inside the dom. It means that you can position it wherever you want and if you don’t have a relative positioned element as parent, left and top will be the distance from the document’s left/top origin.

Assigning left:50% and top:50% enables this element to be positioned always in the center of the screen, but in the center you will find the top left corner of the element.

If you have fixed width/height, you can easily ‘translate’ the point in the center to be actually the center of the wrapper div by giving negative margin-left and margin-top (therefore with the help of some extremely easy basic math their values will be -(width/2) and -(height/2))

EDIT

You can also easily center by using flexbox, plus (a big one) you don’t need to specify w/h, i.e.:

body { /* can also be whatever container */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#wrapper {
  /* whatever style u want */
}

demo: https://jsfiddle.net/00utf52o/