灵活的盒子方式

*现在，通过使用弹性框布局，*垂直对齐
非常简单。如今，除Internet Explorer8和9之外，各种Web浏览器都支持此方法。因此，对于IE8/9，我们需要使用一些hacks /polyfill或其他方法。

在下面的内容中，我将向您展示如何仅用 3行 文本 （不管使用旧的flexbox语法） 如何做到这一点。

注意： 最好使用其他类，而不要进行更改.jumbotron以实现垂直对齐。我将使用vertical-center类名作为实例。

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>



.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

重要 说明 （在演示中考虑） ：

1. 一个 百分比 值height或min-height性质是相对height父元素的，因此，你应该指定height明确的母公司。

2. 由于简洁，在发布的代码段中省略了供应商前缀/旧的flexbox语法，但在线示例中存在。

3. 在一些旧的Web浏览器如Firefox9（在我测试过），柔性容器-.vertical-center在这种情况下-不会占用可用空间父里面，所以我们需要指定width类似属性：width: 100%。

4. 同样在如上所述的某些Web浏览器中，.container在这种情况下，伸缩项可能不会水平出现在中央。看来所施加的左/右margin的auto没有在柔性项目产生任何影响。 因此，我们需要将其对齐box-pack / justify-content。

传统Web浏览器的传统方式

**** 并且应该也可以在InternetExplorer 8和9中使用。我将简短地解释一下：

在内联流程中，可以通过vertical-align: middle声明将内联级别元素垂直对齐到中间。W3C的规格：

中间
将框的垂直中点与父框的基线对齐，再加上父框的x高度的一半。

如果父.vertical-center元素（在这种情况下）具有显式的元素，height则只要我们有可能使子元素具有height与父元素完全相同的子元素，我们便可以将父元素的基线移至整个元素的中点。高度的子项，令人惊讶地使我们所需的流入子项- .container与中心垂直对齐。

聚在一起

话虽如此，我们可以在.vertical-centerby::before或::after伪元素内创建全高元素，还可以更改display它和另一个子元素.containerto 的默认类型inline-block。

然后使用vertical-align: middle;垂直对齐内联元素。

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>



.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

另外，为防止在较小的屏幕上出现意外问题，可以将伪元素的高度重置为auto或，0或者在需要时将其display类型更改为none：

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

还有一件事情：

如果容器周围有footer/个header部分，最好将这些元素正确 _放置__（relative，absolute？取决于您）。_并增加一个较高的z-index值（以确保），以使它们始终位于其他元素的顶部。