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

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

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

试试这个,

.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>

有几种方法可以做到:

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

从Bootstrap 4开始，Flex行为就得到了原生支持。在行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>

来源:Flex·Bootstrap