如何在Bootstrap中将容器垂直居中？

如何在Bootstrap中将容器垂直居中？ 灵活的盒子方式

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

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

注意： 最好使用其他类，而不要进行更改

.jumbotron

以实现垂直对齐。我将使用

vertical-center

类名作为实例。

<div > <!-- ^--- Added class  -->  <div >    ...  </div></div>.vertical-center {  min-height: 100%;    min-height: 100vh;   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-center

by

::before

或

::after

伪元素内创建全高元素，还可以更改

display

它和另一个子元素

.container

to 的默认类型

inline-block

。

然后使用

vertical-align: middle;

垂直对齐内联元素。

<div >  <div >    ...  </div></div>.vertical-center {  height:100%;  width:100%;  text-align: center;    font: 0/0 a;         }.vertical-center:before {      content: " ";  display: inline-block;  vertical-align: middle;      height: 100%;}.vertical-center > .container {  max-width: 100%;  display: inline-block;  vertical-align: middle;         font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;}

另外，为防止在较小的屏幕上出现意外问题，可以将伪元素的高度重置为

auto

或，

0

或者在需要时将其

display

类型更改为

none

：

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

还有一件事情：

如果容器周围有

footer

/个

header

部分，最好将这些元素正确 _放置__（

relative

，

absolute

？取决于您）。_并增加一个较高的

z-index

值（以确保），以使它们始终位于其他元素的顶部。