从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

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

在div的CSS中试试这个:

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

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

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

好吧，我无意中混合了一些解决方案，现在它终于适用于我的布局，我试图在最小分辨率上制作一个3x3的带Bootstrap列的表。

/* Required styles */ #grid a { display: table; } #grid a div { display: table-cell; vertical-align: middle; float: none; } /* Additional styles for demo: */ body { padding: 20px; } a { height: 40px; border: 1px solid #444; } a > div { width: 100%; text-align: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div id="grid" class="clearfix row"> <a class="col-xs-4 align-center" href="#"> <div>1</div> </a> <a class="col-xs-4 align-center" href="#"> <div>2</div> </a> <a class="col-xs-4 align-center" href="#"> <div>3</div> </a> <a class="col-xs-4 align-center" href="#"> <div>4</div> </a> <a class="col-xs-4 align-center" href="#"> <div>5</div> </a> <a class="col-xs-4 align-center" href="#"> <div>6</div> </a> <a class="col-xs-4 align-center" href="#"> <div>7</div> </a> <a class="col-xs-4 align-center" href="#"> <div>8</div> </a> <a class="col-xs-4 align-center" href="#"> <div>9</div> </a> </div>

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}