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

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

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

我遇到了同样的情况，我想在一行中垂直对齐一些div元素，并发现Bootstrap类col-xx-xx将样式应用于div为float: left。

我必须在div元素上应用样式，如style="Float:none"，我所有的div元素开始垂直对齐。下面是工作示例:

<div class="col-lg-4" style="float:none;">

JsFiddle Link

以防有人想了解更多关于float属性的知识:

W3Schools -浮动

div { 边框:1px实体; ｝ 跨度{ 显示:flex; 对齐项目:中心; ｝ .col-5 { 宽度:100 px; 高度:50 px; 浮:左; 背景:红色; ｝ .col-7 { 宽度:200 px; 高度:24 px; 浮:左; 背景:绿色; ｝ < span > < div class = " col-5”> < / div > < div class = " col-7 " > < / div > < / span >

这个答案是一个黑客，但我强烈建议你使用flexbox(正如@Haschem回答中所述)，因为现在到处都支持它。

演示链接: - Bootstrap 3 - Bootstrap 4 alpha 6

你仍然可以在需要的时候使用自定义类:

.vcenter { 显示:inline-block; vertical-align:中间; 浮:没有; ｝ < div class = "行" > <div class="col-xs-5 col-md-3 col-lg-1 vcenter"> <div style="height:10em;border:1px solid #000">Big</div> < / div > < !-- ——><div class="col-xs-5 col-md-7 col-lg-9 vcenter"> <div style="height:3em;border:1px solid #F00">小</div> < / div > < / div >

引导

使用内联块在块之间增加额外的空间，如果你在你的代码中允许一个真正的空间(如…< / div > < / div >……)。如果列的大小加起来是12，这个额外的空格就会破坏我们的网格:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

这里，我们在<div class="[…]<div class="[…][col-lg-10">(一个回车符和2个制表符/8个空格)。所以…

让我们踢开这多余的空间!!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

注意看似无用的注释<!——……——> ?它们很重要——如果没有它们，<div>元素之间的空格将占据布局中的空间，破坏网格系统。

注意:Bootply已经更新

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

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