在div的CSS中试试这个:

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

如果你正在使用Bootstrap的Less版本，并且自己编译成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>

试试这个,

.exe { font-size: 0; } .exe > [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 exe"> <div class="col-xs-5"> <div style="height:5em;border:1px solid grey">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid red">Small</div> </div> </div>

我只是做了这个，它做了我想做的。

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

现在我的页面是这样的

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

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

我想我应该分享我的“解决方案”，以防它能帮助那些不熟悉@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以删除空白。