我正在使用Twitter Bootstrap 3，并且在我想垂直对齐两个时遇到问题div，例如-JSFiddle链接：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Bootstrap中的网格系统使用float: left，而不是display:inline-block，因此该属性vertical-align不起作用。我尝试使用margin-top进行修复，但是我认为这对于响应式设计不是一个好的解决方案。

这个答案是一个hack，但是我强烈建议您使用flexbox（如@Haschem answer中所述），因为它现在在任何地方都受支持。

演示链路：
- 引导3
- 自举4素α6

您仍然可以在需要时使用自定义类：

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

自举

inline-block如果您在代码中保留实际空间（例如...</div> </div>...），则using 在块之间添加了额外的空间。如果列大小总计为12，则此额外空间将破坏网格：

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

在这里，我们在<div class="[...] col-lg-2">和之间有多余的空格<div class="[...] col-lg-10">（回车符和2个制表符/ 8个空格）。所以...

让我们踢这个额外的空间！

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

注意到看似无用的评论了<!-- ... -->吗？它们很重要 -如果没有它们，<div>元素之间的空白将占据布局中的空间，从而破坏网格系统。

注意：Bootply已更新

灵活的盒子布局

随着CSS Flexible Box的问世，许多Web设计师的噩梦¹得到了解决。hacky之一，垂直对齐。现在即使在未知高度也有可能。

“两十年的布局黑客活动即将结束。也许不是明天，而是很快，还有我们的余生。”

— CSS传奇Eric Meyer在W3Conf 2013上

柔性箱（或简称为Flexbox）是一种专门用于布局目的的新布局系统。该规范规定：

Flex布局在表面上类似于块布局。它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性，例如浮点数和列。作为回报，它获得了简单而强大的工具，可以按照Web应用程序和复杂网页经常需要的方式来分配空间和对齐内容。

在这种情况下如何提供帮助？好的，我们等着瞧。

垂直对齐的列

使用Twitter Bootstrap，我们有.row一些.col-*。我们要做的就是将所需的.row²显示为flex容器框，然后按属性将其所有flex项目 s（各列）垂直对齐align-items。

此处示例 （请仔细阅读评论）

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

输出

彩色区域显示列的填充框。

澄清 align-items: center

8.3跨轴对齐：align-items属性

伸缩项可以在伸缩容器的当前行的横轴上对齐，类似于justify-content但在垂直方向上。align-items为所有flex容器的项目设置默认对齐方式，包括匿名flex项目。

align-items: center; 按中心值，弹性项目的边距框位于行内交叉轴的中心。

大警报

重要说明＃1： Twitter Bootstrap不会width在超小型设备中指定列的，除非您为.col-xs-#列提供类之一。

因此，在这个特定的演示中，我使用了.col-xs-*类，以便在移动模式下正确显示列，因为它明确指定width了列的。

但是，您也可以简单地通过更改为特定的屏幕尺寸来关闭 Flexbox布局。例如：display: flex;display: block;

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

或者您可以仅在特定的屏幕尺寸上指定，.vertical-align 例如：

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

在这种情况下，我会采用@KevinNelson的方法。

重要说明＃2：由于简洁，省略了供应商前缀。Flexbox语法在此期间已更改。新的书面语法在旧版本的Web浏览器上将不起作用（但不能与Internet Explorer 9一样旧！Internet Explorer 10和更高版本支持Flexbox）。

这意味着您还应该display: -webkit-box在生产模式下使用供应商前缀属性，例如等等。

如果在演示中单击“切换编译视图”，您将看到CSS声明的前缀版本（这要归功于Autoprefixer）。

具有垂直对齐内容的全高列

正如您在上一个演示中看到的那样，列（弹性项目）不再像其容器（弹性容器框，即.row元素）那样高。

这是因为使用属性center值align-items。默认值为，stretch以便项目可以填充父元素的整个高度。

为了解决这个问题，您还可以添加display: flex;到列中：

此处示例 （再次，请注意评论）

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

输出

彩色区域显示列的填充框。

最后但并非最不重要的一点是，请注意，此处的演示和代码段旨在为您提供不同的想法，从而提供一种实现目标的现代方法。如果要在现实世界的网站或应用程序中使用此方法，请注意“ 大警报 ”部分。

为了进一步阅读，包括浏览器支持，这些资源将很有用：

• Mozilla开发人员网络-柔性盒
• Flexbox指南-CSS技巧
• HTML5Rocks-Flexbox快速
• SmashingMagazine-Flexbox的居中元素
• 菲利普·沃尔顿-通过Flexbox解决
• 我可以使用：灵活的盒式布局模块

^{1. 将div内的图像与响应高度垂直对齐 2.最好使用其他类，以免更改Twitter Bootstrap的默认值.row。}

下面的代码为我工作：

.vertical-align {
    display: flex;
    align-items: center;
}

更新2020

我知道最初的问题是关于Bootstrap 3的，但是现在Bootstrap 4已发布，这是有关垂直中心的一些更新指南。

重要！ 垂直中心相对于父级的高度

如果您试图居中的元素的父元素没有定义的高度，那么任何垂直居中解决方案都将无效 ！

引导程序4

现在，默认情况下，Bootstrap 4是flexbox，因此有许多不同的垂直对齐方式可以使用：自动边距，flexbox utils或display utils以及vertical align utils。乍一看，“ vertical align utils”似乎很明显，但是它们仅适用于内联和表显示元素。这是一些Bootstrap 4垂直居中选项。

1-使用自动边距的垂直中心：

垂直居中的另一种方法是使用my-auto。这将使元素在其容器内居中。例如，h-100使行全高，并使列my-auto垂直居中col-sm-12。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Bootstrap 4-使用自动边距演示的垂直中心

my-auto 表示垂直y轴上的边距，它等效于：

margin-top: auto;
margin-bottom: auto;

2-带Flexbox的垂直中心：

由于Bootstrap 4 .row现在display:flex就可以align-self-center在任何列上使用以使其垂直居中...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

或者，align-items-center整体.row上使所有col-*行垂直居中对齐...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Bootstrap 4-垂直居中的不同高度的列Demo

3-使用显示实用程序的垂直居中：

自举4具有显示utils的，可以被用于display:table，display:table-cell，display:inline等。这些可与所使用的垂直取向utils的要对齐的内联，内联块或表格单元格的元件。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Bootstrap 4-使用display utils 演示的垂直居中

另请参阅： Bootstrap 4中的垂直对齐中心

引导程序3

在要居中的项目容器上的Flexbox方法：

.display-flex-center {
    display: flex;
    align-items: center;
}

转换translateY方法：

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

显示内联方法：

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

Bootstrap 3居中方法演示

在div的CSS中尝试以下操作：

display: table-cell;
vertical-align: middle;

我以为我会分享我的“解决方案”，以防它对其他不熟悉@media查询本身的人有所帮助。

感谢@HashemQolami的回答，我建立了一些媒体查询，这些查询可以像col- *类一样向上移动，以便我可以将col- *堆叠到移动设备上，但将它们垂直对齐在中心以显示更大的屏幕，例如

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

。

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

每个屏幕分辨率需要不同列数的更复杂的布局（例如-xs为2行，-sm为3行，-md为4行等），但是需要使用-xs的简单页面堆叠和-sm并在行中更大，这很好用。

按照您接受的答案，如果您不想自定义标记，为了关注点分离或仅仅因为您使用CMS，可以使用以下解决方案：

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

这里的限制是您不能从父元素继承字体大小，因为该行将字体大小设置为0以便删除空格。

我更喜欢根据David Walsh Vertical center CSS的这种方法：

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

这transform不是必需的；它只是更准确地找到了中心。结果，Internet Explorer 8的居中位置可能会稍微减少一些，但仍然不错- 我可以使用-Transforms 2d。

这是我的解决方案。只需将此类添加到您的CSS内容即可。

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

然后，您的HTML将如下所示：

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

我只是这样做，并且它做了我想要做的。

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

现在我的页面看起来像

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

我确实发现以下代码可以在Chrome浏览器上运行，而不是当前所选答案以外的其他浏览器上运行：

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

自举链接

您可能需要修改高度（特别是.v-center），并根据div[class*='col-']需要删除/更改div 。

我遇到了同样的问题。就我而言，我不知道外部容器的高度，但是这是我固定它的方式：

首先，将html和的高度设置为body100％。这个很重要！没有这些，htmland body元素将仅继承其子代的高度。

html, body {
   height: 100%;
}

然后我有一个外部容器类：

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

最后是带有类的内部容器：

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

HTML很简单：

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

这就是垂直对齐内容所需的全部。在小提琴中检查一下：

Jsfiddle

不需要表格和表格单元格。使用转换可以轻松实现。

示例：http：//codepen.io/arvind/pen/QNbwyM

码：

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>

如果您使用的是少版本的Bootstrap，并且自己编译为CSS，则可以使用一些实用程序类与Bootstrap类一起使用。

我发现它们在我想保留Bootstrap网格系统的响应能力和可配置性的情况下非常有效地工作（例如使用-md或-sm）的情况下，但是我希望给定行中的所有列都具有相同的垂直高度（以便然后垂直对齐其内容，并使该行中的所有列共享同一中间）。

CSS / Less：

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML：

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

我对zessx的答案进行了详细说明，以使在不同屏幕尺寸上混合不同列尺寸时更易于使用。

如果使用Sass，可以将其添加到您的scss文件中：

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

生成以下CSS（如果不使用Sass，则可以直接在样式表中使用）：

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

现在，您可以在响应列中使用它，如下所示：

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

自Bootstrap 4起，原生支持Flex行为。d-flex align-items-center在rowdiv中添加。您不再需要修改CSS内容。

简单示例：http：//jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

以您的示例为例：http : //jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

资料来源：Flex·Bootstrap

好的，我偶然混合了一些解决方案，现在终于可以在我的布局中使用了，在该布局中，我尝试使用最小分辨率的Bootstrap列制作3x3表格。

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>

尝试这个，

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>

有几种方法可以做到：

1. 采用 

   display: table-cell;
   vertical-align: middle;

   和容器的CSS

   display: table;

2. 将填充与媒体屏幕一起使用，以相对于屏幕大小更改填充。Google @media屏幕了解更多信息。

3. 使用相对填充

   即，以百分比指定填充

使用Bootstrap 4（当前处于Alpha版），您可以使用.align-items-center该类。因此，您可以保留Bootstrap的响应性。立即为我工作。请参阅Bootstrap 4文档。

的HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

的CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

我遇到了相同的情况，我想在一行中垂直对齐一些div元素，发现Bootstrap类col-xx-xx将样式作为float应用于div：左。

我必须将样式应用于诸如style =“ Float：none”之类的div元素上，并且所有div元素都开始垂直对齐。这是工作示例：

<div class="col-lg-4" style="float:none;">

JsFiddle链接

万一有人想阅读有关float属性的更多信息：

W3Schools-浮动