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

Question

我正在寻找一种将containerdiv 垂直居中放置jumbotron在页面中间的方法。

在.jumbotron必须适应于屏幕的整个高度和宽度。的.containerdiv有一个宽度1025px和应在该页面（垂直中心）的中间。

我希望此页面的大屏幕适应屏幕的高度和宽度，并且容器垂直于大屏幕垂直居中。我该如何实现？

.jumbotron {

  height:100%;

  width:100%;

}

.container {

  width:1025px;

}

.jumbotron .container {

  max-width: 100%;

}


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="jumbotron">

    <div class="container text-center">

        <h1>The easiest and powerful way</h1>

        <div class="row">

            <div class="col-md-7">

                 <div class="top-bg"></div>

            </div>



            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">

                <ul class="top-features">

                    <li>

                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>

                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>

                    </li>

                    <li>

                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>

                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>

                    </li>

                    <li>

                        <span><i class="fa fa-check simple_bg top-features-bg"></i></span>

                        <p><strong>Check</strong><br>Constantly the status of your links.</p>

                    </li>

                    <li>

                        <span><i class="fa fa-users simple_bg top-features-bg"></i></span>

                        <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>

                    </li>

                        <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>

                        <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>

                </ul>

            </div>

        </div>

    </div>

</div>

Answer 1

灵活的盒子方式

*现在，通过使用弹性框布局，*垂直对齐
非常简单。如今，除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值（以确保），以使它们始终位于其他元素的顶部。