为bootstrap4垂直中心的少数项目

D-flex用于伸缩规则

用于项目垂直方向的弯曲列

justification -content-center用于定心

Style ='height: 300px;'必须为设定点，其中中心为calc或使用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> 

与引导带4垂直对齐中心

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

例子

如果你有这个:

<div class="col-3">

改成这样:

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

add Bootstrap.css then add this to your 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>

柔性箱方式

通过使用灵活的盒子布局，垂直对齐现在非常简单。现在，除了Internet Explorer 8和9之外，许多web浏览器都支持这种方法。因此，对于IE8/9，我们需要使用一些hack /腻子或不同的方法。

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

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

示例(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;
}

重要注意事项(在演示中考虑):

A percentage values of height or min-height properties is relative to the height of the parent element, therefore you should specify the height of the parent explicitly. Vendor prefixed / old flexbox syntax omitted in the posted snippet due to brevity, but exist in the online example. In some of old web browsers such as Firefox 9 (in which I've tested), the flex container - .vertical-center in this case - won't take the available space inside the parent, therefore we need to specify the width property like: width: 100%. Also in some of web browsers as mentioned above, the flex item - .container in this case - may not appear at the center horizontally. It seems the applied left/right margin of auto doesn't have any effect on the flex item. Therefore we need to align it by box-pack / justify-content.

如欲了解更多详情及/或列的垂直对齐方式，请参阅以下主题:

垂直对齐引导3

---

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

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

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

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

在父元素(本例中为.vertical-center元素)具有显式高度的情况下，如果我们可以有一个子元素具有与父元素完全相同的高度，那么我们将能够将父元素的基线移动到全高子元素的中点，并令人惊讶地使我们想要的流子元素(.container)垂直对齐到中心。

聚在一起

也就是说，我们可以在.vertical-center中通过::在伪元素之前或::之后创建一个全高元素，并将其和另一个子元素。container的默认显示类型更改为内联块。

然后使用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，或者在需要时将其显示类型更改为none:

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

更新演示

还有一件事:

如果容器周围有页脚/页眉部分，最好正确地定位这些元素(相对的，绝对的?由你决定)，并添加一个更高的z指数值(为了保证)，以保持它们始终处于其他的顶部。

更新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>

---

Also see: https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4

如果你使用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将完成这项工作