柔性箱方式

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

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>

我喜欢的技巧是:

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

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

---

Demo

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>

看看这小提琴!

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

在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实用程序

我知道这不是这个问题的直接答案，但它可能会帮助到一些人

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

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

给出容器类

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

给出容器内部的div:

align-content: center;

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

与引导带4垂直对齐中心

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

例子

如果你有这个:

<div class="col-3">

改成这样:

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