柔性箱方式

通过使用灵活的盒子布局，垂直对齐现在非常简单。现在，除了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指数值(为了保证)，以保持它们始终处于其他的顶部。

与引导带4垂直对齐中心

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

例子

如果你有这个:

<div class="col-3">

改成这样:

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

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

在IE, Firefox和Chrome中测试。

.parent-container { 位置:相对; 高度:100%; 宽度:100%; ｝ .child-container { 位置:绝对的; 上图:50%; 左:50%; 转换:翻译(-50%，-50%); ｝ < div class = "父容器”> < div class = "子容器”> < h2 > < / h2 >标题文本 < / span > < span >一些文本 < / div > < / div >

网址:https://css-tricks.com/centering-css-complete-guide/

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指数值(为了保证)，以保持它们始终处于其他的顶部。