我想我应该分享我的“解决方案”，以防它能帮助那些不熟悉@media查询的人。

感谢@HashemQolami的回答，我构建了一些媒体查询，可以像col-*类一样向上移动，这样我就可以在移动中堆叠col-*，但在更大的屏幕中垂直对齐地显示它们。

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

更复杂的布局要求每个屏幕分辨率的列数不同(例如-xs为2行，-sm为3行，-md为4行，等等)将需要一些更高级的欺骗，但对于一个简单的页面，-xs堆叠，-sm和更大的行，这很好。

从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

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

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

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 >

试试这个

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