这个答案提出了一个黑客，但我强烈建议您使用flexbox（如@陈志立所述），因为它现在到处都支持。

演示链接：
-bootstrap3
-Bootstrap 4 alpha 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>

Boot唱

如果你在代码中允许一个真正的空间（如...</div> </div>...），使用inline-block会在块之间添加额外的空间。如果列大小加起来为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已更新

在div的CSS中试试这个：

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

我真的发现以下代码使用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。

我遇到了同样的情况，我想将几个div元素垂直对齐成一行，发现Bootstrap类col-xx-xx将样式应用于div，即浮点数：左。

我必须在div元素上应用样式，例如style="Float： no"，并且我所有的div元素都开始垂直对齐。这是工作示例：

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

JsFiddle Link

以防有人想阅读更多关于浮动属性的信息：

W3学校-浮动

灵活的盒子布局

随着CSS柔性框的出现，许多网页设计师的噩梦¹已经得到解决。其中最黑客的一个，垂直对齐。现在即使在未知高度中也是可能的。

"二十年的布局黑客即将结束。也许不是明天，”””很快，和我们的余生。

-CSS传奇Eric Meyer在w3conf 2013

Flexible Box（或简称Flexbox）是一种专门为布局目的而设计的新布局系统。规格说明：

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

在这种情况下，它有什么帮助？好吧，让我们看看。

垂直对齐列

使用Twitter Bootstrap，我们有.row有一些.col-*。我们需要做的就是将所需的.row²显示为flex容器框，然后将其所有flex项目（列）垂直对齐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属性

Flex项目可以在flex容器的当前行的十字轴中对齐，类似于justify-content，但在垂直方向上。align-items设置所有flex容器项的默认对齐，包括匿名弹性项目。

align-items: center;按中心值，flex项目的边距框位于行内十字轴的中心。

大警报

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

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

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

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

你可以像这样在特定屏幕尺寸上指定#0仅：

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

在这种情况下，我会选择@陈志立的方法。

重要提示#2：由于简洁，省略了供应商前缀。Flexbox语法在此期间已更改。新的书面语法无法在旧版本的Web浏览器上运行（但不如Internet Explorer 9旧！Internet Explorer 10及更高版本支持Flexbox）。

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

如果您单击Demo中的"切换编译视图"，您将看到CSS声明的前缀版本（感谢自动修复器）。

内容垂直对齐的全高列

正如您在之前的demo中看到的，列（flex项）不再像它们的容器（flex容器框。即.row元素）一样高。

这是因为align-items属性使用了center值。默认值为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-itemshorizontally within the column  */}

的输出

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

最后但并非最不重要，注意这里的演示和代码片段旨在给你一个不同的想法，提供一种实现目标的现代方法。如果你要在现实世界的网站或应用程序中使用这种方法，请注意“大警报”部分。

对于进一步阅读，包括浏览器支持，这些资源将是有用的：

• Mozilla开发者网络-灵活的盒子
• Flexbox指南-CSS技巧
• HTML5Rocks-Flexbox快速
• SmashingMagazine-使用Flexbox居中元素
• Philip Walton-由Flexbox解决
• 我可以使用：灵活的盒子布局模块

^{1.垂直对齐具有响应高度的div内的图像2.最好使用额外的类，以免更改Twitter Bootstrap的默认.row。}

我遇到了同样的问题。在我的情况下，我不知道外部容器的高度，但我是这样解决的：

首先设置html和body元素的高度，使它们100%。这很重要！如果没有这个，html和body元素将简单地继承其子元素的高度。

html, body {height: 100%;}

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

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

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

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

超文本标记语言很简单：

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

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

jsfiddle

我想我会分享我的“解决方案”，以防它帮助任何不熟悉@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垂直中心CSS：

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

transform并不重要；它只是更准确地找到中心。Internet Explorer 8可能会因此稍微不那么居中，但它仍然不坏-我可以使用-转换2d。

好的，我偶然混合了一些解决方案，现在它终于适用于我的布局，我试图在最小分辨率上制作一个带有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>

我只是做了这件事，它做了我想做的事。

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

现在我的页面看起来像

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

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

我发现这些工作得非常好，我想保留Bootstrap网格系统的响应性和可配置性（如使用-md或-sm），但我希望给定行中的所有列都具有相同的垂直高度（这样我就可以垂直对齐它们的内容并使行中的所有列共享一个公共中间）。

CSS/减：

.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;}

超文本标记语言：

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

不需要表格和表格单元格。使用转换可以很容易地实现。

示例：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>

我详细介绍了zessx的回答，以便在不同屏幕尺寸上混合不同列大小时更容易使用。

如果您使用萨斯，您可以将其添加到您的scss-file：

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

下面的代码对我有用：

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

对于Bootstrap 4（目前处于alpha版本），您可以使用.align-items-center类。所以你可以保留Bootstrap的响应字符。对我来说工作起来很好。见Bootstrap 4文档。

更新2020

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

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

如果要居中的元素的父元素没有定义高度，没有的垂直定心解决方案将工作！

bootstrap4

现在Bootstrap 4是flexbox默认，有许多不同的垂直对齐方法使用：自动页边距、flexbox 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>

或者，在整个.row上使用align-items-center来垂直对齐行中的所有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-垂直中心不同高度列演示

3-使用显示工具的垂直中心：

Bootstrap 4具有显示工具，可用于display:table、display:table-cell、display:inline等。这些可以与垂直对齐工具一起使用以对齐内联、内联块或表单元格元素。

<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-使用显示工具的垂直中心演示

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

bootstrap3

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

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

转换翻译方法：

.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定心方法演示