如何在引导程序中将容器垂直对齐

Question

如何在引导程序中将容器垂直对齐我正在寻找一种垂直居中对齐containerdiv的方法，jumbotron并将其设置在页面中间。在.jumbotron必须适应屏幕的整个高度和宽度，所以我用这个CSS。.jumbotron{   heght:100%;   width:100%;}的.containerdiv有一个宽度1025px和应在该页面（垂直中心）的中间。.container{   width:1025px;}.jumbotron .container {   max-width: 100%;}我的HTML就像<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>所以我希望这个页面让jumbotron适应屏幕的高度和宽度，同时容器垂直居中于jumbotron。我怎样才能实现它？

Answer 1

灵活的盒子方式

通过使用Flexible box布局，垂直对齐现在非常简单。如今，除了Internet Explorer 8和9之外，这种方法在各种 Web浏览器中都受支持。因此，我们需要使用一些hacks / polyfill或IE8 / 9的不同方法。

在下文中，我将向您展示如何仅在3行文本中执行此操作（无论旧的flexbox语法如何）。

注意：最好使用其他类而不是更改.jumbotron来实现垂直对齐。我会使用vertical-center类名作为例子。

实施例在此 （A 镜子上jsbin） 。

<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. 或属性的百分比值是相对于父元素的百分比值，因此您应该明确指定父元素的值。heightmin-heightheightheight

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

3. 在一些旧的Web浏览器（如^{我已经测试过的} Firefox 9 ^）中，flex容器（.vertical-center在这种情况下）不会占用父内部的可用空间，因此我们需要指定如下width属性：width: 100%。

4. 此外，在如上所述的某些Web浏览器中，弹性项目（.container在这种情况下）可能不会水平出现在中心。这似乎是正确应用的左/ margin中auto没有在柔性项目产生任何影响。
   因此，我们需要将其对齐box-pack / justify-content。

有关列的更多详细信息和/或垂直对齐，您可以参考以下主题：

• 与Bootstrap 3垂直对齐

---

传统Web浏览器的传统方式

这是我在回答这个问题时所写的旧答案。这里已经讨论过这种方法，它也可以在Internet Explorer 8和9中使用。我将简要解释一下：

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

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

如果.vertical-center在这种情况下父元素 - 具有明确的height，如果我们可以有一个子元素height与父元素完全相同，我们就能够将父元素的基线移动到完整的中点。 - 高度的孩子，令人惊讶地让我们想要的流动儿童 - .container垂直对齐中心。

全力以赴

话虽这么说，我们可以在.vertical-centerby ::before或::afterpseudo元素中创建一个全高元素，并且还可以更改它的默认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值（以保证）以使它们始终位于其他元素的顶部。

Answer 2

添加Bootstrap.css然后将其添加到您的CSS

   html, body{height:100%; margin:0;padding:0}
 .container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;}
 .row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
 .centering {
  float:none;
  margin:0 auto;}

Now call in your page 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           Am in the Center Now :-)        </div>
    </div></div>