如果你有一个父母的某种高度说,身体{高度:200px} 或如下有父母 div#outer 高度200px,然后添加CSS内容如下

HTML:

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

CSS:

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

然后,儿童内容,说 div#中心内容,将垂直或垂直中间,不使用任何位置的CSS。

#centered {
  margin: 0px auto;
}

或

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

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

演示: https://jsfiddle.net/jinny/p3x5jb81/5/

只添加一个界限显示内部 div 不是 100% 默认:

#outer{ 显示: flex; 宽度: 100%; 高度: 200px; 边界: 1px 固体 #000000; } #centered { 边界: auto; 边界: 1px 固体 #000000; } <div id="outer"> <div id="centered"> Foo foo</div> </div>

DEMO: http://jsfiddle.net/jinny/p3x5jb81/9

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

在HTML文件中

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

在 CSS 文件中

#outer{
  width: 100%;
}

#inner{
  margin: auto;
}

最熟悉的方式,它是广泛使用和工作在许多浏览器,包括旧的,是使用边界如下:

#parent { 宽度: 100%; 背景颜色: #CCCCCC; } #child { 宽度: 30%; /* 我们需要宽度 */ 边缘: 0 自动; /* 这是魔法 */ 颜色: #FFFFFF; 背景颜色: #000000; 粘贴: 10px; 文本平衡: 中心; } <div id="parent"> <div id="child"> 我是孩子,我是水平中心! 我的爸爸是一个灰色的 div dude!</div> </div>

运行代码以查看它是如何工作的. 此外,有两个重要的事情你不应该忘记在你的CSS,当你试图以这种方式集中: 边缘: 0 自动;. 这使它是 div 中心,如你想要的。

Firefox 和 Chrome:

<div style="width:100%;"> <div style="width: 50%; margin: 0px auto;"> 文本</div> </div>

适用于 Internet Explorer、Firefox 和 Chrome:

<div style="width:100%; text-align:center;"> <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div> </div>

文本同步:属性是现代浏览器的可选,但在 Internet Explorer Quirks 模式中需要继承浏览器的支持。

它也可以用绝对定位来垂直和垂直集中,如下:

#outer{
    position: relative;
}

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

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