How to center div?

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 will center the <div> horizontally:

#container{
    width: 366px;
    height: 274px;
    margin: 0 auto;
}

Centering vertically is not quite simple, you maybe have to use javascript for that, or you try this css solution.

Answer 2

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

Answer 3

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 */
}

Answer 4

You could use:

#container {
    // Your other values, but remove position: absolute;
    margin: 0 auto;
}

Alternatively, you can do:

#wrapper, #container {
    border: 1px solid red;
    height: 500px;
    width: 600px;
}

#wrapper {
    bottom: 50%;
    right: 50%;
    position: absolute;
}

#container {
    background: yellow;
    left: 50%;
    padding: 10px;
    position: relative;
    top: 50%;
}

And you're HTML code:

<div id="wrapper">
    <div id="container">
        <h1>Centered Div</h1>
        <p>
            This div has been centered within your browser window.</p>
    </div>
</div>

That will center the <div> in the middle of the browser window.