有几种方法可以做到:

使用 显示:表格单元; vertical-align:中间; 和容器的CSS 显示:表; 使用填充与媒体屏幕，以改变填充相对于屏幕大小。谷歌@media屏幕了解更多。 使用相对填充 也就是说，用%来指定填充

在Bootstrap 4(目前处于alpha阶段)中，您可以使用.align-items-center类。所以你可以保持Bootstrap的响应特性。 对我来说，直接工作很好。参见Bootstrap 4文档。

我遇到了同样的情况，我想在一行中垂直对齐一些div元素，并发现Bootstrap类col-xx-xx将样式应用于div为float: left。

我必须在div元素上应用样式，如style="Float:none"，我所有的div元素开始垂直对齐。下面是工作示例:

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

JsFiddle Link

以防有人想了解更多关于float属性的知识:

W3Schools -浮动

下面的代码适合我:

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

如果你正在使用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>

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

例如: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>