更新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定心方法
