Centrar contenidos verticalmente siempre ha sido una tarea un tanto complicada, existen algunas técnicas como usar posicionamiento absoluto, cambiar el display a tabla y manejar los contenedores como una celda, etc.

La técnica que más me ha gustado consta de tan solo 3 líneas de código en CSS:

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

Mediante la propiedad top movemos el elemento al centro del contenedor, pero aún no es suficiente, con la propiedad transform y translateY podemos mover el eje Y del elemento para que ahora esté sobre el centro, con eso es suficiente para centrar perfectamente cualquier cosa, texto, imágenes, divs, etc.

A continuación un ejemplo más claro, primero definimos el html que necesitamos centrar, en este caso centraremos verticalmente un texto y una imagen.

<section class="text">
  <p>I'm vertically aligned! Hi ho Silver, away!</p>
</section>

<section class="image">
  <img src="http://placehold.it/70x70">
</section>

Ahora el CSS quedaría de la siguiente manera.

section{
    height:200px;
    border:1px solid #000;
    text-align:center;
}

.text p,
.image img{
  position: relative;
  top: 50%;
  
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Con eso estamos centrando verticalmente el contenido, puedes revisar el demo de este ejemplo y verlo en acción.

Happy Coding!