与 Bootstrap 3 垂直对齐
我正在使用 Twitter Bootstrap 3，当我想垂直对齐两个 div 时遇到问题，例如 - JSFiddle link：
Bootstrap 中的网格系统使用 float: left，而不是 display:inline-block，因此属性 vertical-align 不起作用。我尝试使用 margin-top 来修复它，但我认为这对于响应式设计来说不是一个好的解决方案。
div，没有里面的文字，像这样 jsfiddle.net/corinem/Aj9H9 但在这个例子中我不使用引导程序
这个答案提出了一个技巧，但我强烈建议您使用 flexbox（如@Haschem 答案中所述），因为它现在在任何地方都受支持。
演示链接： - Bootstrap 3 - Bootstrap 4 alpha 6
您仍然可以在需要时使用自定义类：
.vcenter { 显示：内联块；垂直对齐：中间；浮动：无； }
如果您在代码中留出实际空间（如 ...</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 个空格）。所以...
https://i.stack.imgur.com/2Yzby.png
让我们踢掉这个额外的空间！！
<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>
https://i.stack.imgur.com/XZTJj.png
注意到看似无用的评论<!-- ... -->了吗？它们重要 -- 如果没有它们，<div> 元素之间的空白将占用布局中的空间，从而破坏网格系统。
注意：Bootply 已更新
灵活的盒子布局
随着 CSS Flexible Box 的出现，许多网页设计师的噩梦1都得到了解决。最 hacky 之一，垂直对齐。现在，即使在未知高度中也可以。
“二十年的布局黑客即将结束。也许不是明天，而是很快，在我们的余生中。” — CSS 传奇人物 Eric Meyer 在 W3Conf 2013
Flexible Box（或简称 Flexbox），是一种专门为布局目的而设计的新布局系统。 specification states：
Flex 布局表面上类似于块布局。它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性，例如浮动和列。作为回报，它获得了简单而强大的工具，用于以 web 应用程序和复杂网页通常需要的方式分配空间和对齐内容。
在这种情况下它有什么帮助？好吧，走着瞧。
垂直对齐的列
使用 Twitter Bootstrap，我们有一些 .row 和一些 .col-*。我们需要做的就是将所需的 .row2 显示为 flex container 框，然后通过 align-items 属性垂直对齐其所有 flex item（列）。
EXAMPLE HERE （请仔细阅读评论）
<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;
}
输出
https://i.stack.imgur.com/cvLaI.jpg
彩色区域显示列的填充框。
澄清对齐项目：中心
8.3 横轴对齐：align-items 属性Flex项目可以在flex容器的当前行的横轴上对齐，类似于justify-content，但方向是垂直的。 align-items 设置所有弹性容器项目的默认对齐方式，包括匿名弹性项目。对齐项目：居中；通过中心值，flex 项目的边距框位于行内的交叉轴的中心。
大警报
重要说明 #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 */
}
}
或者您可以像这样specify .vertical-align only on specific screen sizes：
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
在这种情况下，我会选择 @KevinNelson 的 approach。
重要说明 #2：由于简洁，供应商前缀被省略。 Flexbox 语法在此期间已更改。新的书面语法不适用于旧版本的 Web 浏览器（但不如 Internet Explorer 9 旧！Internet Explorer 10 及更高版本支持 Flexbox）。
这意味着您还应该在生产模式下使用以供应商为前缀的属性，例如 display: -webkit-box 等。
如果您点击 Demo 中的“切换编译视图”，您将看到 CSS 声明的前缀版本（感谢 Autoprefixer）。
具有垂直对齐内容的全高列
正如您在 previous demo 中看到的，列（弹性项目）不再像它们的容器（弹性容器框。即 .row 元素）一样高。
这是因为 align-items 属性使用了 center 值。默认值为 stretch，以便项目可以填充父元素的整个高度。
为了解决这个问题，您也可以将 display: flex; 添加到列中：
EXAMPLE HERE （同样，请注意评论）
.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 */
}
输出
https://i.stack.imgur.com/d2o3b.jpg
彩色区域显示列的填充框。
最后但并非最不重要的一点是，请注意此处的演示和代码片段旨在为您提供不同的想法，以提供实现目标的现代方法。如果您打算在现实世界的网站或应用程序中使用这种方法，请注意“大警报”部分。
对于包括浏览器支持在内的进一步阅读，这些资源将很有用：
Mozilla 开发者网络 - 灵活的盒子
Flexbox 指南 - CSS 技巧
HTML5Rocks - Flexbox 快速
SmashingMagazine - 使用 Flexbox 使元素居中
Philip Walton - 由 Flexbox 解决
我可以使用：灵活的盒子布局模块
1。 Vertically align an image inside a div with responsive height 2.最好使用一个额外的类，以免改变 Twitter Bootstrap 的默认 .row。
col-* 的类，但您的小提琴/codepens 没有使用引导程序，因此它们具有误导性。您的示例不适用于引导程序；它的网格系统不是基于flex，因此它们是不兼容的。只需在引导驱动的页面中尝试您的任何示例，您就会意识到它们不起作用。
2020 年更新
我知道最初的问题是针对 Bootstrap 3，但现在 Bootstrap 4 已经发布，这里有一些关于垂直中心的更新指南。
重要的！垂直中心是相对于父级的高度
如果您尝试居中的元素的父元素没有定义的高度，则任何垂直居中解决方案都不起作用！
引导程序 4
现在 Bootstrap 4 默认为 flexbox，有许多不同的垂直对齐方法可以使用：auto-margins、flexbox utils 或 display 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 - Vertical center using auto-margins Demo
my-auto 表示垂直 y 轴上的边距，等效于：
margin-top: auto;
margin-bottom: auto;
2 - 带有 Flexbox 的垂直中心：
https://i.stack.imgur.com/gKaKI.png
由于 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 - Vertical center different height columns Demo
3 - 使用 Display Utils 垂直居中：
Bootstrap 4 具有可用于 display:table、display:table-cell、display:inline 等的 display utils。这些可与 vertical alignment 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 - Vertical center using display utils Demo
另请参阅：Vertical Align Center in 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;
}
Demo of Bootstrap 3 centering methods
bootstrap 3 解决方案 +1
下面的代码对我有用：
.vertical-align {
display: flex;
align-items: center;
}
在 div 的 CSS 中试试这个：
display: table-cell;
vertical-align: middle;
按照接受的答案，如果您不希望自定义标记，以分离关注点或仅仅因为您使用 CMS，则以下解决方案可以正常工作：
.valign { 字体大小：0； } .valign > [class*="col"] { 显示：内联块；浮动：无；字体大小：14px；字体大小：1rem；垂直对齐：中间； }
这里的限制是您不能从父元素继承字体大小，因为该行将字体大小设置为 0 以删除空白。
我想我会分享我的“解决方案”，以防它帮助其他不熟悉@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 和更大的行，这很好用。
clear: both; 才能使其正常工作。
.row 修饰符...所以它应该看起来像 class="row row-sm-flex-center"。 BS3 .row 定义处理 clear:both;
clear: both;。
根据 David Walsh Vertical center CSS，我更喜欢这种方法：
.children{
position: relative;
top: 50%;
transform: translateY(-50%);
}
transform 不是必需的；它只是更准确地找到了中心。因此，Internet Explorer 8 可能会稍微不那么集中，但仍然不错 - Can I use - 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 { 显示：弹性；证明内容：中心；对齐项目：居中； }
Item
Item
Item
我只是这样做了，它做了我想做的事。
.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;
}
Bootply 链接
您可能需要根据需要修改高度（特别是在 .v-center 上）并删除/更改 div[class*='col-'] 上的 div。
我遇到了同样的问题。就我而言，我不知道外部容器的高度，但这就是我修复它的方法：
首先将 html 和 body 元素的高度设置为 100%。这个很重要！如果没有这个，html 和 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>
这就是垂直对齐内容所需的全部内容。在小提琴中检查一下：
提琴手
不需要表格和表格单元格。使用变换可以轻松实现。
示例：http://codepen.io/arvind/pen/QNbwyM
代码：
.child { 高度：10em;边框：1px 纯绿色；位置：相对； } .child-content { 位置：绝对；最高：50%；左：50%； -webkit-transform: 翻译(-50%, -50%);变换：翻译（-50%，-50%）； }
如果您使用的是 Less 版本的 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;
}
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's answer 做了一些详细说明，以便在不同的屏幕尺寸上混合不同的列尺寸时更容易使用。
如果您使用 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 行为。在 row 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>
对于最新版本的引导程序，您可以使用 align-items-center。在 flexbox 容器上使用 align-items 实用程序来更改 flex 项目在交叉轴上的对齐方式（y 轴开始，x 轴如果 flex-direction: 列）。从开始、结束、中心、基线或拉伸（浏览器默认）中选择。
<div class="d-flex align-items-center">
...
</div>
div { 边框：1px 实心； } 跨度{ 显示：弹性；对齐项目：居中； } .col-5{ 宽度：100px;高度：50px；向左飘浮;背景：红色； } .col-7{ 宽度：200px;高度：24px；向左飘浮;背景：绿色； }
尝试这个，
.exe { 字体大小：0； } .exe > [class*="col"] { 显示：内联块；浮动：无；字体大小：14px；字体大小：1rem；垂直对齐：中间； }
有几种方法可以做到：
使用显示：表格单元格；垂直对齐：中间；以及要显示的容器的 CSS：table；使用 padding 和 media-screen 来更改相对于屏幕大小的填充。谷歌@media 屏幕了解更多信息。使用相对填充即，以 % 的形式指定填充
使用 Bootstrap 4（目前处于 alpha 阶段），您可以使用 .align-items-center 类。所以你可以保持 Bootstrap 的响应特性。对我来说效果很好。请参阅Bootstrap 4 Documentation。
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;
}
我花了很多时间从这里尝试解决方案，但没有一个对我有帮助。几个小时后，我相信这将允许您将 BS3 中的任何子元素居中。
CSS
.vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
}
HTML
<div class="col-md-6 vertical-center">
<div class="container">
<div class="row">
</div>
</div>
</div>
我遇到了同样的情况，我想将几个 div 元素垂直对齐，发现 Bootstrap 类 col-xx-xx 将样式应用于 div 作为 float:left。
我必须在 div 元素上应用样式，例如 style="Float:none" 并且我所有的 div 元素都开始垂直对齐。这是工作示例：
<div class="col-lg-4" style="float:none;">
JsFiddle 链接
以防万一有人想了解更多关于 float 属性的信息：
W3Schools - 浮动
col-lg-2和col-lg-10），则会中断。有趣的是，如果您添加以下 JS 代码（假设为 jQuery），它会自行修复：$('.row').html($('.vcenter'));inline-blockextra space 引起的。我在编辑中给出了解决方案。