您可以使用 CSS Flexbox。

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

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

您可以使用 Flexbox 如下:

#outer { 显示: flex; justify-content: center } <div id="outer"> <div id="inner"> Foo foo</div> </div>

适用于所有浏览器支持的 Autoprefixer:

#outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

或其他

使用转换:

#inner { 位置:绝对; 左: 50%; transform:翻译(-50%) } <div id="outer"> <div id="inner"> Foo foo</div> </div>

使用 Autoprefixer:

#inner {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform:     translate(-50%);
    transform:         translate(-50%)
}

可以用很多方法来做到这一点,很多男孩/男孩的答案是正确的,并且工作得很好,我会给一个更不同的模式。

在HTML文件中

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

在 CSS 文件中

#outer{
  width: 100%;
}

#inner{
  margin: auto;
}

我找到了类似的路径与边缘左,但它也可以留下。

#inner {
    width: 100%;
    max-width: 65px; /* To adapt to screen width. It can be whatever you want. */
    left: 65px; /* This has to be approximately the same as the max-width. */
}

中心一个Div在一个Div

.outer { 显示: -webkit-flex; 显示: flex; //-webkit-justify-content: center; //justify-content: center; //align-items: center; width: 100%; height: 100px; background-color: lightgrey; }.inner { 背景颜色: cornflowerblue; padding: 2rem; margin: auto; //align-self: center; } <div class="outer"> <div class="inner"

如果你知道它的宽度,让我们说它是1200像素,去:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

因此,基本上它将添加50%的左边边,低于已知宽的一半。