如何在 Bootstrap 中垂直居中容器？答案

【问题标题】：How to vertically center a container in Bootstrap?如何在 Bootstrap 中垂直居中容器？
【发布时间】：2014-04-07 10:36:42
【问题描述】：

我正在寻找一种将container div 垂直居中在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>

【问题讨论】：

在响应式居中列上查看此内容minimit.com/articles/solutions-tutorials/…
css-vertical-center.com有一些带有浏览器兼容性信息的解决方案
未来的读者使用 Bootstrap 4 和 Bootstrap 5 see this question

标签： html css twitter-bootstrap twitter-bootstrap-3 vertical-alignment

【解决方案1】：

2021 年更新

Bootstrap 5仍然使用flexbox，所以垂直居中的方法和Bootstrap 4一样...

Bootstrap 4使用了flexbox，所以垂直居中的方法更简单，不需要额外的CSS。

只需使用d-flex 和align-items-center 实用程序类..

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

http://codeply.com/go/ui6ABmMTLv

重要提示：垂直居中相对于高度。您尝试居中的项目的父容器必须具有定义的高度。如果您想要页面的高度，请在父级上使用 vh-100 或 min-vh-100！例如：

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>

另请参阅：https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4

【讨论】：

或者如果vh不是最方便的方式，也可以使用min-height-50/75/100...
@seedme -- Bootstrap 中没有 min-height-* 类
太好了，谢谢，也许做一个最小的例子，即没有jumbotron，甚至没有container，也没有text-center，因为问题只是关于垂直对齐
干得好，不涉及 css！

【解决方案2】：

用 bootstrap 4 垂直对齐中心

将这个类：d-flex align-items-center 添加到元素中

示例

如果你有这个：

<div class="col-3">

改成这样：

<div class="col-3 d-flex align-items-center>

【讨论】：

【解决方案3】：

给容器类

.container{
    height: 100vh;
    width: 100vw;
    display: flex;
}

给出容器内的 div：

align-content: center;

这个 div 内的所有内容都会显示在页面中间。

【讨论】：

【解决方案4】：

在 IE、Firefox 和 Chrome 中测试。

.parent-container {
    position: relative;
    height:100%;
    width: 100%;
}

.child-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="parent-container">
    <div class="child-container">
        <h2>Header Text</h2>
        <span>Some Text</span>
    </div>
</div>

发现于https://css-tricks.com/centering-css-complete-guide/

【讨论】：

【解决方案5】：

如果您使用的是 Bootstrap 4，则只需添加 2 个 div：

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="jumbotron">
    <div class="d-table w-100 h-100">
      <div class="d-table-cell w-100 h-100 align-middle">
        <h5>
          your stuff...
        </h5>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>
                More stuff...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

类：d-table、d-table-cell、w-100、h-100 和 align-middle 将完成这项工作

【讨论】：

【解决方案6】：

对于bootstrap4几个项目的垂直中心

d-flex 用于弹性规则

flex-column 表示项目的垂直方向

justify-content-center 用于居中

style='height: 300px;' 必须具有用于计算中心的设置点或使用 h-100 类

然后为水平居中 div d-flex justify-content-center 还有一些容器

所以我们有 3 个标签的层次结构：div-column -> div-row -> div-container

     <div class="d-flex flex-column justify-content-center bg-secondary" 
        style="height: 300px;">
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
      </div>

【讨论】：

这似乎只是复制 Zim 的答案。

【解决方案7】：

在Bootstrap 4：

水平居中孩子，使用 bootstrap-4 类：

justify-content-center

垂直居中孩子，使用 bootstrap-4 类：

 align-items-center

但请记住不要忘记对这些使用 d-flex 类它是一个 bootstrap-4 实用程序类，就像这样

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

注意：如果此代码不起作用，请确保添加 bootstrap-4 实用程序

我知道这不是这个问题的直接答案，但它可能对某人有所帮助

【讨论】：

这似乎只是复制 Zim 的答案。

【解决方案8】：

我最喜欢的技术：

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

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

演示

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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><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>

另见this Fiddle！

【讨论】：

【解决方案9】：

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

【讨论】：

html AND body { 高度：100%; } 是关键

【解决方案10】：

灵活的盒子方式

垂直对齐现在通过使用Flexible box layout 变得非常简单。现在，除了 Internet Explorer 8 和 9 之外的网络浏览器的 wide range 都支持这种方法。因此我们需要使用一些 hacks/polyfills 或 different approaches 用于 IE8/9。

在下文中，我将向您展示如何在仅 3 行 的文本中做到这一点（不管旧的 flexbox 语法）。

注意：最好使用附加类而不是更改.jumbotron 来实现垂直对齐。例如，我会使用 vertical-center 类名。

Example Here （jsbin 上的Mirror）。

<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。
由于简洁，在发布的 sn-p 中省略了供应商前缀/旧 flexbox 语法，但在线示例中存在。
在一些旧的 Web 浏览器中，例如 Firefox 9 ^{（我已经在其中测试过）}，flex 容器 - 在这种情况下为 .vertical-center - 不会占用可用空间在父级内部，因此我们需要指定width 属性，例如：width: 100%。
此外，在上述的某些 Web 浏览器中，弹性项目 - 在这种情况下为 .container - 可能不会出现在水平中心。似乎auto 的应用左/右margin 对弹性项目没有任何影响。
因此我们需要用box-pack / justify-content对齐它。

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

vertical-align with Bootstrap 3

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

这是我在回答这个问题时写的旧答案。此方法已在 here 进行过讨论，它应该也适用于 Internet Explorer 8 和 9。我会简单解释一下：

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

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

如果父元素 - 在这种情况下为 .vertical-center 元素 - 具有显式 height，如果我们可以有一个子元素具有与父元素完全相同的 height，我们将能够 @ 987654331@ 到全高孩子的中点，并令人惊讶地使我们想要的流入孩子 - .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;
}

WORKING DEMO。

此外，为了防止在超小屏幕中出现意外问题，您可以将伪元素的高度重置为 auto 或 0 或将其 display 类型更改为 none（如果需要）：

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

UPDATED DEMO

还有一件事：

如果容器周围有footer/header 部分，最好正确定位这些元素（relative, absolute? 由您决定。） z-index 值（为了保证）让他们始终处于领先地位。

【讨论】：

让我们continue this discussion in chat
这一切都很好，但是只要将display: flex 添加到.container，它就会导致子.rows 翻转。因此，似乎 flexbox 方式需要我们放弃使用一些主要的引导功能？