html - 如何水平居中元素？

Question

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

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

Answer 1

与 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 .

---

其他解决方案

您可以将此 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>