In this guide I will show how you can horizontally and vertically center a box in the browser window. I’ve used as little markup and CSS as I think is possible just to make this example easy to grasp.

The XHTML

<div class="box">
<!-- Website content goes here -->
</div>

The CSS

div.box{
width: 500px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px; /* height/2 = 200 */
margin-left: -250px; /* width/2 = 250 */
}

You can also make this shorthand like this:

div.box{
width: 500px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin: -200px 0 0 -250px;
}

/Simon Kjellberg