更新2020

我知道最初的问题是关于引导3的，但是现在引导4已经发布了，这里有一些关于垂直中心的更新指南。

重要!垂直中心相对于父节点的高度

如果你试图居中的元素的父元素没有定义 高度，没有垂直定心解决方案将工作!

引导4

现在Bootstrap 4默认是flexbox，有许多不同的方法来使用垂直对齐:自动边距，flexbox utils，或显示utils和垂直对齐utils。乍一看，“垂直对齐utils”似乎很明显，但这些只适用于内联和表格显示元素。这里有一些Bootstrap 4垂直定心选项。

---

1 -垂直中心使用自动边距:

另一种垂直居中的方法是使用my-auto。这将使元素在其容器内居中。例如，h-100使行全高，my-auto将使col-sm-12列垂直居中。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

引导4 -垂直中心使用自动边际演示

My-auto表示垂直y轴上的边距，等价于:

margin-top: auto;
margin-bottom: auto;

---

2 -垂直中心与Flexbox:

因为Bootstrap 4 .row现在是display:flex，你可以简单地使用align-self-center在任何列上垂直居中…

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

或者，在整个.row上使用align-items-center来垂直居中对齐行中所有的col-*…

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

引导4 -垂直中心不同高度列演示

---

3 -垂直中心使用显示Utils:

Bootstrap 4具有可用于display:table、display:table-cell、display:inline等的显示utils。这些可以与垂直对齐utils一起使用，以对齐内联、内联块或表格单元格元素。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

引导4 -垂直中心使用显示utils演示

还看到: 在引导4中垂直对齐中心

---

引导3

将容器上的物品调整到居中:

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

转换翻译方法:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

显示内联方法:

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

演示Bootstrap 3定心方法

我更喜欢这个方法，根据David Walsh垂直中心CSS:

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

转换不是必要的;它只是找到了更精确的中心。Internet Explorer 8可能会因此稍微不那么居中，但它仍然不错-我可以使用-转换2d。

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

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

从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

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

试试这个

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