Estoy usando Twitter Bootstrap 3 y tengo problemas cuando quiero alinear verticalmente dos div, por ejemplo, enlace JSFiddle :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

El sistema de cuadrícula en Bootstrap usa float: left, no display:inline-block, por lo que la propiedad vertical-alignno funciona. Intenté usarlo margin-toppara solucionarlo, pero creo que esta no es una buena solución para el diseño receptivo.

Esta respuesta presenta un truco, pero le recomiendo encarecidamente que use flexbox (como se indica en la respuesta de @Haschem ), ya que ahora es compatible en todas partes.

Enlace de demostración:
- Bootstrap 3
- Bootstrap 4 alpha 6

Todavía puede usar una clase personalizada cuando la necesite:

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

<div class="row">
    <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">Small</div>
    </div>
</div>

Bootply

El uso inline-blockagrega espacio adicional entre bloques si deja un espacio real en su código (como ...</div> </div>...). Este espacio adicional rompe nuestra cuadrícula si los tamaños de columna suman 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>

Aquí, tenemos espacios adicionales entre <div class="[...] col-lg-2">y <div class="[...] col-lg-10">(un retorno de carro y 2 pestañas / 8 espacios). Y entonces...

¡¡Vamos a patear este espacio extra !!

<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>

¿Observa los comentarios aparentemente inútiles <!-- ... -->? Son importantes : sin ellos, el espacio en blanco entre los <div>elementos ocupará espacio en el diseño, rompiendo el sistema de cuadrícula.

Nota: Bootply se ha actualizado

Diseño de caja flexible

Con la llegada de CSS Flexible Box , muchas de las pesadillas de los diseñadores web ¹ se han resuelto. Uno de los más hacky, la alineación vertical. Ahora es posible incluso en alturas desconocidas .

"Dos décadas de hacks de diseño están llegando a su fin. Quizás no mañana, pero pronto, y por el resto de nuestras vidas".

- CSS legendario Eric Meyer en W3Conf 2013

Flexible Box (o en resumen, Flexbox), es un nuevo sistema de diseño que está diseñado específicamente para propósitos de diseño. La especificación dice :

El diseño flexible es superficialmente similar al diseño de bloques. Carece de muchas de las propiedades más complejas centradas en texto o documento que se pueden usar en el diseño de bloques, como flotantes y columnas. A cambio, obtiene herramientas simples y poderosas para distribuir espacio y alinear contenido de la manera que las aplicaciones web y las páginas web complejas a menudo necesitan.

¿Cómo puede ayudar en este caso? Bien, veamos.

Columnas alineadas verticalmente

Usando Twitter Bootstrap tenemos .rowalgunos .col-*s. Todo lo que tenemos que hacer es mostrar el .row² deseado como un cuadro contenedor flexible y luego alinear todos sus elementos flexibles (las columnas) verticalmente por align-itemspropiedad.

EJEMPLO AQUÍ (Lea los comentarios con atención)

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

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

La salida

El área coloreada muestra el cuadro de relleno de columnas.

Aclarando sobre align-items: center

8.3 Alineación del eje transversal: la align-itemspropiedad

Los elementos flexibles se pueden alinear en el eje transversal de la línea actual del contenedor flexible, de manera similar justify-contentpero en la dirección perpendicular. align-itemsestablece la alineación predeterminada para todos los elementos del contenedor flexible, incluidos los elementos flexibles anónimos .

align-items: center; Por el valor central, el cuadro de margen del elemento flexible se centra en el eje transversal dentro de la línea.

Alerta grande

Nota importante n. ° 1: Twitter Bootstrap no especifica el número widthde columnas en dispositivos extra pequeños a menos que le dé una de .col-xs-#clases a las columnas.

Por lo tanto, en esta demostración en particular, he usado .col-xs-*clases para que las columnas se muestren correctamente en el modo móvil, porque especifica widthexplícitamente el valor de la columna.

Pero, alternativamente, puede desactivar el diseño de Flexbox simplemente cambiando display: flex;a display: block;tamaños de pantalla específicos. Por ejemplo:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

O puede especificar .vertical-align solo en tamaños de pantalla específicos como este:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

En ese caso, optaría por el enfoque de @KevinNelson .

Nota importante n. ° 2: Se omiten los prefijos de proveedores debido a la brevedad La sintaxis de Flexbox se ha cambiado durante el tiempo. La nueva sintaxis escrita no funcionará en versiones anteriores de navegadores web (¡pero no tan antiguas como Internet Explorer 9! Flexbox es compatible con Internet Explorer 10 y posteriores).

Esto significa que también debe usar propiedades con prefijo de proveedor como, display: -webkit-boxetc., en el modo de producción.

Si hace clic en "Alternar vista compilada" en la demostración , verá la versión prefijada de las declaraciones CSS (gracias a Autoprefixer ).

Columnas de altura completa con contenido alineado verticalmente

Como puede ver en la demostración anterior , las columnas (los elementos flexibles) ya no son tan altas como su contenedor (la caja del contenedor flexible, es decir, el .rowelemento).

Esto se debe al uso de centervalor por align-itemspropiedad. El valor predeterminado es stretchpara que los elementos puedan ocupar toda la altura del elemento principal.

Para solucionarlo, también puede agregar display: flex;a las columnas:

EJEMPLO AQUÍ (Nuevamente, tenga en cuenta los comentarios)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

La salida

El área coloreada muestra el cuadro de relleno de columnas.

Por último, pero no menos importante , tenga en cuenta que las demostraciones y los fragmentos de código aquí están destinados a darle una idea diferente, para proporcionar un enfoque moderno para lograr el objetivo. Tenga en cuenta la sección " Alerta grande " si va a utilizar este enfoque en sitios web o aplicaciones del mundo real.

Para obtener más información, incluida la compatibilidad con el navegador, estos recursos serían útiles:

• Red de desarrolladores de Mozilla: cajas flexibles
• Guía de Flexbox - Trucos CSS
• HTML5Rocks - Flexbox rápido
• SmashingMagazine - Elementos de centrado con Flexbox
• Philip Walton - Resuelto por Flexbox
• Puedo usar: Módulo de diseño de caja flexible

^{1. Alinear verticalmente una imagen dentro de un div con altura de respuesta 2. Es mejor usar una clase adicional para no alterar el valor predeterminado de Twitter Bootstrap .row.}

El siguiente código funcionó para mí:

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

Actualización 2020

Sé que la pregunta original era para Bootstrap 3 , pero ahora que se lanzó Bootstrap 4 , aquí hay una guía actualizada sobre el centro vertical.

¡Importante! El centro vertical es relativo a la altura del padre

Si el elemento principal del elemento que está intentando centrar no tiene una altura definida , ¡ ninguna de las soluciones de centrado vertical funcionará!

Bootstrap 4

Ahora que Bootstrap 4 es flexbox de forma predeterminada, hay muchos enfoques diferentes para la alineación vertical utilizando: márgenes automáticos , utilidades flexbox o las utilidades de visualización junto con las utilidades de alineación vertical . Al principio, las "utilidades de alineación vertical" parecen obvias, pero solo funcionan con elementos de visualización en línea y de tabla. Aquí hay algunas opciones de centrado vertical de Bootstrap 4.

1 - Centro vertical con márgenes automáticos:

Otra forma de centrar verticalmente es usar my-auto. Esto centrará el elemento dentro de su contenedor. Por ejemplo, h-100hace que la fila sea de altura completa y my-autocentrará verticalmente la col-sm-12columna.

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

Bootstrap 4 - Centro vertical usando la demostración de márgenes automáticos

my-auto representa márgenes en el eje y vertical y es equivalente a:

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

2 - Centro vertical con Flexbox:

Dado que Bootstrap 4 .rowes ahora display:flex, simplemente puede usarlo align-self-centeren cualquier columna para centrarlo verticalmente ...

       <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>

o, utilícelo align-items-centeren todo .rowpara alinear verticalmente en el centro todo col-*en la fila ...

       <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>

Bootstrap 4 - Demostración de columnas de diferente altura de centro vertical

3 - Centro vertical usando las utilidades de pantalla:

Bootstrap 4 tiene utils de visualización que se pueden utilizar para display:table, display:table-cell, display:inline, etc .. Estos pueden ser usados con los utils de alineación vertical a inline align, elementos de celda de tabla inline-block o.

<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>

Bootstrap 4 - Desplazamiento de centro utilizando la pantalla utils Demostración

Ver también: Centro de alineación vertical en Bootstrap 4

Bootstrap 3

Método de caja flexible en el contenedor de los artículos para centrar:

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

Transformar el método translateY:

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

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

Mostrar método en línea:

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

Demostración de los métodos de centrado de Bootstrap 3

Prueba esto en el CSS del div:

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

Pensé en compartir mi "solución" en caso de que ayude a cualquier otra persona que no esté familiarizada con las consultas de @media.

Gracias a la respuesta de @ HashemQolami, construí algunas consultas de medios que funcionarían en dispositivos móviles como las clases col- * para poder apilar las col- * para dispositivos móviles pero mostrarlas alineadas verticalmente en el centro para pantallas más grandes, por ejemplo

<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;
    }
}

Los diseños más complicados que requieren un número diferente de columnas por resolución de pantalla (por ejemplo, 2 filas para -xs, 3 para -sm y 4 para -md, etc.) necesitarían un manejo más avanzado, pero para una página simple con -xs apilados y -sm y más grandes en filas, esto funciona bien.

Siguiendo la respuesta aceptada, si no desea personalizar el marcado, por separación de preocupaciones o simplemente porque usa un CMS, la siguiente solución funciona bien:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

La limitación aquí es que no puede heredar el tamaño de fuente del elemento principal porque la fila establece el tamaño de fuente en 0 para eliminar los espacios en blanco.

Prefiero este método según David Walsh Vertical center CSS :

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

No transformes esencial; simplemente encuentra el centro con un poco más de precisión. Internet Explorer 8 puede estar un poco menos centrado como resultado, pero aún así no está mal. ¿Puedo usar? Transforms 2d .

Esta es mi solucion. Simplemente agregue esta clase a su contenido CSS.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

Entonces su HTML se vería así:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Acabo de hacer esto y hace lo que quiero que haga.

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

Y ahora mi página parece

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

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

Realmente encuentro que el siguiente código funciona con Chrome y no con otros navegadores que no sean la respuesta seleccionada actualmente:

.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;
}

Enlace Bootply

Es posible que deba modificar las alturas (específicamente en .v-center) y eliminar / cambiar div en div[class*='col-']para sus necesidades.

Me encontré con este mismo problema. En mi caso no sabía la altura del contenedor exterior, pero así es como lo arreglé:

Primero establezca la altura de sus elementos htmly bodypara que estén al 100%. ¡Esto es importante! Sin esto, las htmly bodylos elementos simplemente heredar la altura de sus hijos.

html, body {
   height: 100%;
}

Luego tuve una clase de contenedor externo con:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

Y por último el contenedor interior con clase:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML es tan simple como:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

Esto es todo lo que necesita para alinear el contenido verticalmente. Compruébalo en violín:

Jsfiddle

No hay necesidad de tablas y celdas de tabla. Se puede lograr fácilmente usando transform.

Ejemplo: http://codepen.io/arvind/pen/QNbwyM

Código:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>

Si está usando la versión Less de Bootstrap y compilando en CSS usted mismo, puede usar algunas clases de utilidad para usar con las clases de Bootstrap.

He descubierto que estos funcionan fantásticamente bien cuando quiero preservar la capacidad de respuesta y la configurabilidad del sistema de cuadrícula Bootstrap (como usar -mdo -sm), pero quiero que todas las columnas en una fila determinada tengan la misma altura vertical (para poder luego alinee verticalmente su contenido y haga que todas las columnas de la fila compartan un centro común).

CSS / Menos:

.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>

Desarrollé un poco la respuesta de zessx , para que sea más fácil de usar al mezclar diferentes tamaños de columna en diferentes tamaños de pantalla.

Si usa Sass , puede agregar esto a su archivo scss:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

Lo cual genera el siguiente CSS (que puede usar directamente en sus hojas de estilo, si no está usando Sass):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

Ahora puede usarlo en sus columnas receptivas como esta:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

Los comportamientos Flex son compatibles de forma nativa desde Bootstrap 4. Agregue d-flex align-items-centerel rowdiv. Ya no necesita modificar su contenido CSS.

Ejemplo simple: 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>

Con su ejemplo: 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>

Fuente: Flex · Bootstrap

De acuerdo, accidentalmente mezclé algunas soluciones y finalmente ahora funciona para mi diseño en el que intenté hacer una tabla de 3x3 con columnas Bootstrap en la resolución más pequeña.

/* 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>

Para obtener la última versión de bootstrap, puede usar align-items-center. Use las utilidades de alinear elementos en contenedores de caja flexible para cambiar la alineación de los elementos flexibles en el eje transversal (el eje y para comenzar, el eje x si la dirección flexible es la columna). Elija entre inicio, final, centro, línea de base o extensión (navegador predeterminado).

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

Prueba esto,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>

Hay varias formas de hacerlo:

1. Utilizar 

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

   y el CSS del contenedor para

   display: table;
   

2. Utilice el relleno junto con media-screen para cambiar el relleno en relación con el tamaño de la pantalla. Pantalla de Google @media para saber más.

3. Usar relleno relativo

   Es decir, especifique el relleno en términos de%

Con Bootstrap 4 (que está en alfa actualmente) puede usar la .align-items-centerclase. Para que pueda mantener el carácter receptivo de Bootstrap. Funciona de inmediato bien para mí. Consulte la documentación de Bootstrap 4 .

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}