如何在另一个<div>中水平居中<div>？
我怎么能水平居中一个<div>另一个内<div>使用CSS（如果它甚至有可能）？
<div id="outer">
<div id="inner">Foo foo</div>
</div>
您可以将此CSS应用于内部<div> ：
#inner {
width: 50%;
margin: 0 auto;
}
当然，您不必将width设置为50% 。 任何小于包含<div>宽度都可以工作。 margin: 0 auto是什么实际居中。
如果您的目标是IE8 +，则可以更好地使用它：
#inner {
display: table;
margin: 0 auto;
}
它将使内部元素水平居中并且它不需要设置特定的width就可以工作。
工作示例：
#inner {
display: table;
margin: 0 auto;
}<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>如果你不想在内部div上设置固定宽度，你可以这样做：
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}<div id="outer">
<div id="inner">Foo foo</div>
</div>最好的方法是用CSS 3。
盒子型号：
#outer{
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner{
width: 50%;
}
根据你的可用性，你也可以使用box-orient, box-flex, box-direction属性。
Flex ：
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
详细了解如何集中子元素
链接2
链接3
链接4
这就解释了为什么盒子模型是最好的方法 ：