对于最新版本的引导，您可以使用align-items-center。使用flexbox容器上的align-items实用程序来更改flex项在交叉轴上的对齐方式(起始为y轴，如果flex-direction: column则为x轴)。从开始、结束、中心、基线或拉伸(浏览器默认值)中选择。

<div class="d-flex align-items-center">
    ...
</div>

下面的代码适合我:

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

我遇到了同样的情况，我想在一行中垂直对齐一些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 -浮动

我想我应该分享我的“解决方案”，以防它能帮助那些不熟悉@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和更大的行，这很好。

有几种方法可以做到:

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

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