最简单的答案: 添加边界:自动; 到内部。

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

CSS 代码

.outer{
    width: 100%;
    height: 300px;
    background: yellow;
}

.inner{
    width: 30%;
    height: 200px;
    margin: auto;
    background: red;
    text-align: center
}

查看我的 CodePen 链接: http://codepen.io/feizel/pen/QdJJrK

此分類上一篇

此分類上一篇: Margin:0px auto:

此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>

这里还有另一种方式可以用Flexbox垂直集中,而无需向内部容器指定任何宽度,想法是使用虚构元素,将从右侧和左侧推内部内容。

.container { 显示: flex; 边界: 1px 固体; }.container:前,.container:后 { 内容: "; flex: 1; }.inner { 边界: 1px 固体红色; 粘贴: 5px; } <div class="container"> <div class="inner"> Foo 内容 </div> </div>

我们也可以考虑到垂直调整的相同情况,简单地改变旋转到列的方向:

.container { 显示: flex; flex 方向: 列; 边界: 1px 固体; min 高度: 200px; }.container:前,.container:后 { 内容: "; flex: 1; }.inner { 边界: 1px 固体红色; 粘贴: 5px; } <div class="container"> <div class="inner"> Foo 内容 </div> </div>

试着和周围玩

margin: 0 auto;

如果你也想集中你的文本,试着使用:

text-align: center;

我知道我稍晚回答这个问题,我没有打扰阅读每一个答案,所以这可能是一个重复。

inner { width: 50%; background-color: Khaki; margin: 0 auto; }

试试这:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}