bootstrap 垂直居中 布局_如何在Bootstrap中将容器垂直居中？

小编典典

灵活的盒子方式

*现在，通过使用弹性框布局，*垂直对齐

非常简单。如今，除Internet Explorer8和9之外，各种Web浏览器都支持此方法。因此，对于IE8/9，我们需要使用一些hacks /polyfill或其他方法。

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

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

...

.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;

}

重要 说明 (在演示中考虑) ：

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

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

在一些旧的Web浏览器如Firefox9(在我测试过)，柔性容器-.vertical-center在这种情况下-不会占用可用空间父里面，所以我们需要