how this works:vertically center a div

Here is the CSS Snippet to be assigned to the DIV to be centered. The size of the DIV is 100 x 100 px ( same as the above example ).

/* CSS Document */

.centered_div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background: red;
}

Here is another example with size 500 x 200 px.

/* CSS Document */

.centered_div {
width:500px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
background: red;
}

ref: http://www.dezinerfolio.com/category/tips-n-tutorials/