html - 如何将<div>水平居中？

Question

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

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

Answer 1

您可以将此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;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

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