#outer{
  display: flex;
  width: 100%;
  height: 200px;
  justify-content:center;
  align-items:center;
}

.outer - 完整的宽度.inner - 没有宽度设置(但可以指定最大宽度)

假设计算的元素的宽度为1000像素和300像素。

在.center-helper 中插入.center-helper 创建.center-helper 一个内线区块; 它变成相同的尺寸.center 使其宽 300 像素. 按.center-helper 50% 相对其父母; 此位置其左在 500 像素. 向外. 按.center-helper 50% 相对其父母; 此位置其左在 -150 像素. 向中帮助, 这意味着其左在 500 - 150 = 350 像素。

演示:

使用此代码:

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

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

有一个选择,我发现:

每个人都说要使用:

margin: auto 0;

但还有另一个选项. 设置此属性为父母 div. 它在任何时候都完美工作:

text-align: center;

看,孩子去中心。

最后,为您提供CSS:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

专注于水平

演示:

以垂直和垂直为中心

在我的经验中,将盒子垂直和水平中心的最佳方式是使用额外的容器,并应用以下属性:

外部容器:

内部容器:

内容盒子:

.outer 容器 { 显示: 表; 宽度: 100%; 高度: 120px; 背景: #CCC; }. 内部容器 { 显示: 表 细胞; 垂直平面: 中间; 文本平面: 中间; }.centered 内容 { 显示: inline-block; 背景: #FFF; padding: 20px; 边界: 1px 固体 #000; } <div class="outer-container"> <div class="inter-container"> <div class="centered-content">

再看这个Fiddle吧!

它不能集中,如果你不给它一个宽度,否则,它将采取,默认情况下,整个水平空间。