I have gone trough a lot of ways to horizontally and vertically center a DIV. Many of the code snippets had a Child DIV1 inside a Parent DIV2 to center the Child. They work perfect but I found a simpler way to center a single DIV trough CSS.

I am not sure if this is already known to all, but I experimented and came up with this simple CSS snippet.

Here is a visual representation of how this works:

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;
}

You can also find an online example here