您需要设置容器的宽度。 （ auto 将无法使用）

  #container {
 width：640px; / *也可以是百分比。* / 
 height：auto; 
 margin：0 auto; 
 padding：10px; 
 position：relative; 
} 
 

查看这些链接

• auto - CSS参考| MDN


• margin - CSS参考| MDN


• 含义 c c c c $ c $


更新 - 操作中@ jsFiddle

I've got an problem. I have the html code like this:

<div id="main_content" >
    <div id="container">
    </div>
</div>

The css like this:

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

I suppose that the #container will be centered within #main_content. However, it is not. I just want to find out the reason and how to make it centered.

You need to set the width of the container. (auto won't work)

#container {
    width: 640px; /*can be in percentage also.*/
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links

• auto - CSS reference | MDN
• margin - CSS reference | MDN
• What is the meaning of auto value in a CSS property - ***

Update - In action @ jsFiddle