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

Question

如何在引导中垂直对齐容器我正在寻找一种垂直中心对齐的方法container内部的divjumbotron并将其设置在页面的中间。这个.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>                                      </ul>                 </div>             </div>         </div>     </div>因此，我希望这个页面能够适应屏幕的高度和宽度，以及容器垂直中心到巨无霸。我怎样才能做到呢？

Answer 1

柔性箱方式

垂直对准现在非常简单，通过使用柔性盒布局..现在，这个方法在宽范围除了InternetExplorer 8和9。因此，我们需要使用一些hack/聚填充物或不同方法第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. A 百分比值.的值height或min-height属性相对于height因此，应该指定height显式的父母。

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

3. 在一些旧的web浏览器中，比如Firefox 9^{(其中我测试过)}挠性容器-.vertical-center在这种情况下-将不会占用父级内部可用的空间，因此我们需要指定width财产，如：width: 100%.

4. 另外，在上面提到的一些web浏览器中，FLEX项目-.container在这种情况下-可能不会出现在中心水平。似乎申请的左/右margin的auto对弹性物品没有任何影响。
   因此，我们需要通过box-pack / justify-content.

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

• 垂直对齐与引导带3

---

旧式web浏览器的传统方式

这是我在回答这个问题时写的旧答案。讨论了这种方法。这里它应该也适用于InternetExplorer 8和9。我会简单地解释一下：

在内联流中，内联级别元素可以通过以下方式垂直对齐到中间。vertical-align: middle申报。规格W3C:

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

如果父母-.vertical-center元素在本例中有一个显式height，如果我们有一个完全相同的子元素height对于父母，我们可以若要移动父级的基线，请执行以下操作到全高度孩子的中点，并令人惊讶地使我们想要的流子-.container-垂直对中。

聚在一起

尽管如此，我们可以在.vertical-center通过::before或::after元素，并更改默认值。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有价值(为保证)使他们永远处于其他人的顶端。

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>