CSS

#inner {
  display: table;
  margin: 0 auto; 
}

HTML

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

CSS 3的盒子相匹配属性

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

您可以使用链接 https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview

.outer{
      display: table;
      width: 100%;
      height: 100%;
}
.inner {
    vertical-align: middle;
}

参考 https://v4-alpha.getbootstrap.com/例子/覆盖/

福克斯

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

文本编辑:中心

應用文本順序:中心的內線內容集中在線框內. 但是,因為內部 div 有默定的寬度: 100% 你必須設定一個特定的寬度或使用下列之一:

显示: 区块 显示: 内线 显示: 内线 区块

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

使用边界: 0 auto 是另一个选项,它更适合较老的浏览器兼容性。

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

转型

<中心>(分散)

克里斯·科伊尔(Chris Coyier)在他的博客上写了一篇关于“在未知中集中”的好文章,这是一个多种解决方案的环节,我发表了一个没有发表在这个问题上,它有更多的浏览器支持,而不是Flexbox解决方案,你不使用显示:表;这可能会破坏其他事情。

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

#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);
}

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