在div的CSS中试试这个:

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

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

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

现在我的页面是这样的

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

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

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

好吧，我无意中混合了一些解决方案，现在它终于适用于我的布局，我试图在最小分辨率上制作一个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>

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

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

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