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

我正在寻找一种方法，使containerdiv在jumbotron内垂直居中，并将其设置在页面的中间。

jumbotron "必须适应整个屏幕的高度和宽度。.container div的宽度为1025px，应该位于页面的中间（垂直中心）。

我想让这个页面的jumbotron适应屏幕的高度和宽度，同时让容器垂直于jumbotron的中心。我怎样才能做到这一点呢？

.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>

<！--结束片段--&gt。

TylerH
已编辑的问题 26日 九月 2019 в 2:47
编程
html css twitter-bootstrap-3 twitter-bootstrap vertical-alignment
5日 三月 2014 в 11:36
10 种观点
解决办法

弹性箱方式

通过使用Flexible box layout，垂直对齐现在变得非常简单。现在，除了Internet Explorer 8 & 9之外，广泛的网络浏览器都支持这种方法。 因此，我们需要为IE8/9使用一些黑客/polyfills或不同的方法 。

在下文中，我将向你展示如何在只有*3行的文本中做到这一点（不考虑旧的flexbox语法）*。

注意：最好使用一个额外的类，而不是改变.jumbotron来实现垂直对齐。例如，我会使用vertical-center类的名称。

[这里的例子][5] (A 镜像在jsbin上).

<div class="jumbotron vertical-center"> 
  <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.高度 "或 "最小高度 "属性的*百分比值是相对于父元素的 "高度 "而言的，因此你应该明确指定父元素的 "高度"。

2.2. 由于简短，张贴的片段中省略了供应商的前缀/旧的flexbox语法，但在线示例中存在。

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

4.4.如上所述，在某些网页浏览器中，柔性项目--本例中的.container'--可能不会在水平方向上出现在中心位置。似乎应用了auto'的左/右`margin'对flex item没有任何影响。
因此，我们需要通过 "box-pack / justify-content "来对齐它。

关于进一步的细节和/或列的垂直对齐，你可以参考下面的主题。

传统的方式，用于传统的网络浏览器

这是我在回答这个问题时写的旧答案。这个方法已经被讨论过了这里，它应该也能在Internet Explorer 8和9中工作。我将简单地解释一下。

在内联流程中，一个内联级元素可以通过vertical-align: middle声明垂直对齐到中间。规范来自W3C。

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

在父元素--本例中的.vertical-center元素--有明确的高度'的情况下，如果我们能有一个与父元素的高度'完全相同的子元素，我们就能将父元素的基线移动到全高子元素的中点，并令人惊讶地使我们想要的内流子--.container--垂直地对齐中心。

凑齐所有

也就是说，我们可以通过::before或::after伪元素在.vertical-center内创建一个全高元素，同时将它和另一个子代.container的默认display类型改为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;
}

工作演示。

另外，为了防止在超小屏幕上出现意外问题，你可以将伪元素的高度重置为自动'或0'，或者在需要时将其显示'类型改为无'。

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

更新的演示

还有一件事。

如果容器周围有 "footer"/"header "部分，最好将这些元素正确定位("相对"、"绝对"？由你决定。)并添加一个较高的 "z-index "值(以确保)，使它们始终处于其他元素的顶部。

Community
编辑本段答案23日 五月 2017 в 12:26
评论(2)

添加Bootstrap.css，然后将此添加到你的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;
}

现在在你的页面中调用

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

我喜欢的技术:

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

Demo


<div class="jumbotron vertical-center">
  <div class="container text-center">
    <h1>The easiest and powerful way</h1>
    <div class="row">
      <div class="col-md-7">
        <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>

      <div class="col-md-5 iPhone-features">
        <ul class="top-features">
          <li>
            <span></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span></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>
body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}
John Slegers
编辑本段答案19日 五月 2016 в 11:26
评论(0)