如果你有一个父母的某种高度说,身体{高度: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

中心一个元素,不需要动态高度和宽度的旋转器/父母

没有副作用:它不会限制一个集中元素的宽度低于视门宽度,当使用Flexbox中的边缘在一个集中元素内

position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));

垂直 + 垂直中心,如果其高度与宽度相同:

position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

只需将此 CSS 内容添加到您的 CSS 文件中,它将自动集中内容。

垂直调整到CSS中中心:

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

垂直 + 垂直到中心在 CSS 中:

#outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

使用 Sass (SCSS合成) 你可以用混合物做到这一点:

与翻译

// Center horizontal mixin
@mixin center-horizontally {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}

在HTML标签中:

<div class="center-horizontally">
    I'm centered!
</div>

请记住添加位置:相对;到母 HTML 元素。

与Flexbox

使用Flex,你可以这样做:

@mixin center-horizontally {
  display: flex;
  justify-content: center;
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}

在HTML标签中:

<div class="center-horizontally">
    <div>I'm centered!</div>
</div>

试试这个CodePen!

#centered { 位置: 绝对; 左: 50%; 边缘左: -100px; } <div id="outer" style="width:200px"> <div id="centered"> Foo foo</div> </div>

确保母元素定位,即相对、固定、绝对或粘贴。

如果你不知道你的 div 的宽度,你可以使用 transform:translateX(-50%);而不是负面边界。

使用 CSS calc(),代码可以变得更简单:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

原则仍然是相同的;把项目放在中间,并补偿宽度。

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

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

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