我详细阐述了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>

灵活的箱体布局

随着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，最好使用一个额外的类。

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

bootp链接

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

我更喜欢这个方法，根据David Walsh垂直中心CSS:

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

转换不是必要的;它只是找到了更精确的中心。Internet Explorer 8可能会因此稍微不那么居中，但它仍然不错-我可以使用-转换2d。

我花了很多时间从这里尝试解决方案，但没有一个对我有帮助。几个小时后，我相信这将允许你在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>

我详细阐述了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>