Question

I have a problem with centering div in HTML (vertical & horizontal). My code looks something like this:

<div id="container">SOME HTML</div>

#container{
    width: 366px;
    height: 274px;
    margin: 50%;
    top: -137px;
    left: -188px;
    position:absolute;
}

Only chrome center this div in to the middle of the screen.

Answer 1

This does the trick (vertical & horizontal):

#container{
    position: absolute;
    width: 366px;
    height: 274px;
    left: 50%;
    top: 50%;
    margin-left: -183px; /* half width */
    margin-top: -137px; /* half height */
}