从Bootstrap 4开始，Flex行为就得到了原生支持。在行div中添加d-flex align-items-center。您不再需要修改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 4(目前处于alpha阶段)中，您可以使用.align-items-center类。所以你可以保持Bootstrap的响应特性。 对我来说，直接工作很好。参见Bootstrap 4文档。

对于最新版本的引导，您可以使用align-items-center。使用flexbox容器上的align-items实用程序来更改flex项在交叉轴上的对齐方式(起始为y轴，如果flex-direction: column则为x轴)。从开始、结束、中心、基线或拉伸(浏览器默认值)中选择。

<div class="d-flex align-items-center">
    ...
</div>

这个答案是一个黑客，但我强烈建议你使用flexbox(正如@Haschem回答中所述)，因为现在到处都支持它。

演示链接: - Bootstrap 3 - Bootstrap 4 alpha 6

你仍然可以在需要的时候使用自定义类:

.vcenter { 显示:inline-block; vertical-align:中间; 浮:没有; ｝ < div class = "行" > <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">小</div> < / div > < / div >

引导

使用内联块在块之间增加额外的空间，如果你在你的代码中允许一个真正的空间(如…< / div > < / div >……)。如果列的大小加起来是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="[…]<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已经更新

根据接受的答案，如果你不希望自定义标记，为了分离关注点或只是因为你使用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以删除空白。

灵活的箱体布局

随着CSS Flexible Box的出现，许多网页设计师的噩梦1都得到了解决。其中最俗气的就是垂直对齐。现在，即使在未知的高度也有可能。

“20年的布局攻略即将结束。也许不是明天， 但很快，而且是我们的余生。” - CSS传奇Eric Meyer在W3Conf 2013

Flexible Box(或简称Flexbox)是一种新的布局系统，专门为布局目的而设计。该规范规定:

Flex布局表面上类似于块布局。它缺少很多 可以使用的更复杂的以文本或文档为中心的属性 在块布局中，如浮动和列。作为回报，它得到了简单 以及分配空间和调整内容的强大工具 web应用程序和复杂网页通常需要的。

它对这种情况有什么帮助呢?让我想想。

---

垂直对齐柱

使用Twitter引导，我们有一些。col-*的。行。我们所需要做的就是将所需的.row2显示为一个伸缩容器框，然后通过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;
}

输出

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

明确对齐项:居中

8.3跨轴对齐:align-items属性 伸缩项可以在伸缩容器当前行的十字轴上对齐，类似于justify-content，但方向是垂直的。Align-items为所有伸缩容器的项设置默认对齐方式，包括匿名伸缩项。 对齐项目:中心; 根据中心值，伸缩项的边距框位于该行内的十字轴中心。

---

大的警报

重要提示#1:Twitter Bootstrap不会在特别小的设备中指定列的宽度，除非你给列指定一个.col-xs-#类。

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

但你也可以通过更改显示来关闭Flexbox布局:flex;显示:块;在特定的屏幕尺寸。例如:

/* 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等。

如果你在Demo中点击“Toggle Compiled View”，你会看到CSS声明的前缀版本(感谢Autoprefixer)。

---

内容垂直对齐的全高列

正如您在前面的演示中看到的，列(伸缩项)不再像它们的容器(伸缩容器盒)那么高。例如，.row元素)。

这是因为使用中心值对齐项目属性。默认值是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 quick SmashingMagazine -中心元素与Flexbox Philip Walton -由Flexbox解决 我可以使用:灵活的盒子布局模块

---

1. 垂直对齐div内的图像与响应高度 2. 为了不改变Twitter Bootstrap的默认.row，最好使用一个额外的类。