另一个解决方案,而无需为其中一个元素设置宽度,是使用CSS 3转换属性。

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

技巧是,翻译X(-50%)将#内部元素置于其自己的宽度的左侧50%。

這裡有一個顯示水平和垂直調整的Fiddle。

更多信息可在Mozilla Developer Network上找到。

我已经应用了内线风格到内部 div. 使用此一个:

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>

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

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

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

你可以以不同的方式做到这一点. 请参见下面的例子:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}

您可以使用 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%)
}

这里还有另一种方式可以用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>