如何在一个div中居中另一个div？

使CSS内容如下所示...

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

#container {
    height: auto;
    width: 90%;
    margin: 0 auto;
    background-color: #FFF;
    padding: 10px;
}

这里有一个可行的示例：http://jsfiddle.net/golchha21/mjT7t/

如果您不想为#container设置宽度，只需添加

text-align: center;

将内容添加到 #main_content。

如果你将width: auto设置为块级元素，则宽度将为100％。因此，在这里使用auto值真的没有太多意义。对于高度也是一样的，因为默认情况下，任何元素都设置为自动高度。
因此，最终你的div#container实际上是居中的，但它仅占用其父元素的整个宽度。你已经正确进行了居中处理，只需要更改宽度（如果需要），就可以看到它真正居中了。如果你想要居中你的#main_content，只需在其上应用margin: 0 auto;即可。

我认为这会很好用，但根据您的需求，您可能需要重新设置“top:200px;”：

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

#container {
    width: 100px;
    height: 20px;;
    margin: 0 auto;
    padding-top: 10px;
    position: relative;
    top: 200px;
    border: 2px solid #CCCCCC;
}

你需要为想要居中的 div 分配一个宽度。

像这样：

#container {
    width: 500;
    margin: 0 auto;
    padding: 10px;
}

这些链接包含更多信息和示例：

• CSS布局 - 水平和垂直对齐

• http://www.w3schools.com/css/tryit.asp?filename=trycss_align_container

.parent {
    width: 500px;
    height: 200px;
    border: 2px solid #000;
    display: table-cell;
    vertical-align: middle;
}

#kid {
    width:70%; /* 70% of the parent */
    margin:auto;
    border:2px solid #F00;
    height: 70%;
}

这确实很好地解决了问题（在所有新浏览器中测试），其中父div具有class="parent"，子div具有id="kid"。
该样式可以水平和垂直居中。使用复杂的技巧才能实现垂直居中 - 或者通过使父div作为表格单元格来实现，这是HTML中仅支持垂直对齐的元素之一。
只需设置kid的高度、margin为auto和垂直居中即可。这是我知道的最简单的解决方案。

尝试这个，如果这是你想要的输出：

。

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

#main_content {
    background-color: #2185C5;
    margin: 0 auto;
}

#container {
    width: 100px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    background: red;
}