Question

I tried the following code :

#my_div {
    margin-left: auto;
    margin-right: auto;
    width:700px;
    background-color:red;
}

Code

As far as I know is that margin-left and margin-right set to auto will center the div. But how come it doesn’t work like that?

Thanks.

Answer 1

It does, you just have to make sure your window is more than 700px wide. Here is a working example with 200px width:

#my_div {
    margin-left: auto;
    margin-right: auto;
    width:200px;
    background-color:red;
}

JSFiddle