How to put a div in center of browser using CSS?

css, layout

Solution

HTML:

<div id="something">... content ...</div>

CSS:

#something {
    position: absolute;
    height: 200px;
    width: 400px;
    margin: -100px 0 0 -200px;
    top: 50%;
    left: 50%;
}

Problem

How to put a div in center of browser both vertically and horizontally using CSS only? Make sure it works on IE7 too. If everything fails, we may use JavaScript, but a last choice.

Original source