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

2018-05-31 12:17:47

我正在寻找一种方法来垂直居中对齐jumbotron的container div并将其设置在页面中间。

.jumbotron必须适应屏幕的全部高度和宽度，所以我使用了这个CSS。

.jumbotron{
  heght:100%;
  width:100%;
}

.container div的宽度为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与屏幕的高度和宽度一起调整为容器的垂直中心。我怎样才能实现它？

灵活的盒子方式

通过使用灵活的盒子布局， 垂直对齐现在非常简单。现在，除了Internet Explorer 8和9之外，这种方法在各种网络浏览器中得到支持。因此，我们需要针对IE8 / 9使用一些黑客/ polyfill或不同的方法。

在下文中，我将向您介绍如何在只有三行文本的情况下执行此操作（无论旧的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;
}

重要注意事项（在演示中考虑）：

height或min-height属性的百分比值与父元素的height有关，因此应该明确指定父项的height 。

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

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

同样在上面提到的一些网页浏览器中，flex项目 - 在这种情况下 - .container - 可能不会在中心水平显示。似乎auto应用的左/右边margin对Flex项目没有任何影响。
因此我们需要通过box-pack / justify-content来对齐它。

有关列的更多详细信息和/或垂直对齐，请参阅下面的主题：

与Bootstrap 3垂直对齐

传统网络浏览器的传统方式

这是我在回答这个问题时写下的旧答案。这个方法已经在这里讨论过了，它应该可以在Internet Explorer 8和9中运行。我会简单解释一下：

在内联流程中，内联层级元素可以通过vertical-align: middle声明vertical-align: middle 。来自W3C的规范：

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

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

全部一起

话虽如此，我们可以通过::before或::after伪元素在.vertical-center创建一个全高元素，并且还可以将默认display类型和另一个子元素， .container为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值（以保证），以保持它们始终位于其他位置。

添加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>

2018年更新

Bootstrap 4包含flexbox，因此垂直居中的方法更容易， 不需要额外的CSS 。

只需使用d-flex和align-items-center实用程序类即可。

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

http://www.codeply.com/go/ui6ABmMTLv

链接地址: http://www.djcxy.com/p/7155.html

上一篇: How to center align vertically the container in bootstrap

下一篇: Is it possible to vertically align text within a div?