如何水平居中元素？

Question

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

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

原文由 Lukas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将此 CSS 应用于内部 <div> ：

 #inner {
  width: 50%;
  margin: 0 auto;
}

当然，您不必将 width 设置为 50% 。任何小于包含 <div> 的宽度都可以。 margin: 0 auto 是实际居中的原因。

如果您的目标是 Internet Explorer 8 （及更高版本），最好使用以下代码：

 #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>

---

编辑

使用 flexbox 很容易将 div 设置为水平和垂直居中的样式。

 #inner {
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

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

要使 div 垂直居中对齐，请使用属性 align-items: center 。

原文由 Justin Poliey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你不想在内部设置一个固定宽度 div 你可以这样做：

 #outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

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

这使得内部 div 成为一个可以以 text-align 为中心的内联元素。

原文由 Alfred 发布，翻译遵循 CC BY-SA 3.0 许可协议