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

#outer {
  border: 1px solid red;
  width:100%;
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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