如何水平居中一个元素？

内容来自 DOC https://q.houxu6.top/?s=如何水平居中一个元素？

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

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

可以使用以下CSS样式实现：

#outer {
  display: flex;
  justify-content: center;
}

#inner {
  margin: 0 auto;
}

使用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;
}

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

如果您正在针对Internet Explorer 8（及其更高版本），则可能最好这样做：

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素水平居中，并且不需要设置特定的宽度。

工作示例在这里：

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