与Bootstrap 3一致
我正在使用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>这个答案提出了一个黑客，但我强烈建议你使用flexbox（如@Haschem答案中所述），因为它现在到处都支持。
演示链接：
- Bootstrap 3
- 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>灵活的箱子布局
随着CSS Flexible Box的问世，许多网页设计师的噩梦1已经解决。 其中一个最hacky，垂直对齐。 现在甚至可能在未知的高度 。
“二十年的布局黑客即将结束，也许不是明天，而是很快，而且是我们的余生。”
- 在W3Conf 2013的CSS传奇Eric Meyer
柔性盒（或简称为Flexbox）是专为布局而设计的新版式系统。 该规范指出：
Flex布局与块布局表面相似。 它缺少许多可以在块布局中使用的更复杂的以文本或文档为中心的属性，例如浮动和列。 作为回报，它可以获得简单而强大的工具来分发空间并以web应用程序和复杂网页经常需要的方式对齐内容。
在这种情况下它有什么用处？ 好吧，走着瞧。
垂直对齐的列
使用Twitter的引导，我们有.row š有一些.col-*秒。 我们需要做的是将所需的.row 2显示为弹性容器框，然后通过align-items属性将其所有弹性项（列）垂直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容器的项目（包括匿名flex项目）设置默认对齐方式。
align-items: center; 通过中心值，Flex项目的边距框以线条内的交叉轴为中心。
大警戒
重要说明＃1：除非您将.col-xs-#类中的一个指定给列，否则Twitter Bootstrap不会指定特殊小型设备中列的width 。
因此，在这个特殊的演示中，我使用了.col-xs-*类，以便在移动模式下正确显示列，因为它明确指定了列的width 。
但是，您也可以通过更改display: flex; 关闭 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等。
如果你点击Demo中的“切换编译视图”，你会看到CSS声明的前缀版本（感谢Autoprefixer）。
垂直对齐内容的全高立柱
正如你在前面的演示中看到的，列（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-items
horizontally within the column */
}
输出
彩色区域显示列的填充框。
最后但并非最不重要的一点是 ，请注意，此处的演示和代码片段旨在为您提供一种不同的想法，以提供一种实现此目标的现代方法。 如果您打算在现实世界的网站或应用程序中使用此方法，请介意“高度警示 ”部分。
如需进一步阅读，包括浏览器支持，这些资源将非常有用：
1.将div内的图像与响应高度垂直对齐2.最好使用额外的类，以免更改Twitter Bootstrap的默认.row 。
以下代码适用于我：
.vertical-align {
display: flex;
align-items: center;
}
下一篇: only in Bootstrap 3?