使用此代码:

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

这对我工作:

#inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

在此代码中,您将确定元素的宽度。

#inter { 边界: 0.05em 固体黑色; } #outer { 边界: 0.05em 固体红色; 宽度:100%; 显示: flex; justify-content: center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

其他解决方案

您可以将此 CSS 应用到内部 <div>:

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

当然,你不需要设置宽度为50%,任何宽度低于含有<div>的将工作。

如果您正在针对 Internet Explorer 8 (及以后),可能更好地拥有此相反:

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

它将使内部元素的中心垂直,它工作而不设置特定的宽度。

工作例子在这里:

您可以使用 CSS Flexbox。

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

您可以在此链接中了解更多信息: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

根据您的情况,最简单的解决方案可能是:

margin: 0 auto; float: none;

这将你的内心分散为垂直和垂直:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

只有垂直调整,变化

margin: 0 auto;

垂直,变化。

margin: auto 0;