如何使用CSS在另一个<div>中将一个<div>水平居中(如果可能的话)？

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

解决方案

我们可以将此CSS应用于内部的<div>：

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

当然，我们不必将"宽度"设置为" 50％"。小于包含的<div>的宽度都可以。 " margin：0 auto"是实际居中的内容。

如果我们以IE8 +为目标，最好改用以下方法：

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

它将使内部元素水平居中，并且无需设置特定的"宽度"即可工作。

这里的工作示例：

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

<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

如果不给定宽度，则不能居中，否则默认情况下它将占据整个水平空间。

设置"宽度"，并将" margin-left"和" margin-right"设置为" auto"。不过，这仅适用于水平。如果我们想同时使用两种方式，则只需两种方式即可。不要害怕尝试；不要害怕。并不是说我们会破坏任何东西。