如何水平居中<div>？

Question

如何水平居中<div>？

如何使用CSS <div>在另一个内部水平居中<div>？

<div id="outer">  

  <div id="inner">Foo foo</div>

</div>

Answer 1

您可以将此CSS应用于内部<div>：#inner&nbsp;{ &nbsp;&nbsp;width:&nbsp;50%; &nbsp;&nbsp;margin:&nbsp;0&nbsp;auto;}当然，您不必设置width为50%。任何小于包含的宽度<div>都可以。该margin: 0 auto是什么呢实际定心。如果你的目标是IE8 +，那么最好改为：#inner&nbsp;{ &nbsp;&nbsp;display:&nbsp;table; &nbsp;&nbsp;margin:&nbsp;0&nbsp;auto;}它将使内部元素水平居中，并且无需设置特定的工作width。这里的工作示例：#inner {&nbsp; display: table;&nbsp; margin: 0 auto;}<div id="outer" style="width:100%">&nbsp; <div id="inner">Foo foo</div></div>

Answer 2

如果您不想在内部设置固定宽度，div可以执行以下操作：#outer {&nbsp; width: 100%;&nbsp; text-align: center;}#inner {&nbsp; display: inline-block;}<div id="outer">&nbsp;&nbsp;&nbsp; &nbsp; <div id="inner">Foo foo</div></div>

Answer 3

我创建了这个例子来展示如何纵向和横向&nbsp;align。代码基本上是这样的：#outer&nbsp;{ &nbsp;&nbsp;position:&nbsp;relative;}和...#inner&nbsp;{ &nbsp;&nbsp;margin:&nbsp;auto;&nbsp;&nbsp; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;left:0; &nbsp;&nbsp;right:&nbsp;0; &nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;bottom:&nbsp;0;}center当你重新调整屏幕大小时它会保持不变。