Las propiedades transform del CSS3 nos permiten establecer animaciones sobre los elementos HTML. Estas transformaciones aparecieron por primera vez en el 2007 como parte del proyecto Webkit y posteriormente se incluyeron en el estandar CSS3. 

Con ellas podemos hacer diferentes cosas sobre los objetos como rotarlos, desplazarlos, escalarlos, etc. En esta ocasion mostraremos el uso transform-translate para poder centrar verticalmente un objeto.

Digamos que tenemos un contenedor .container y dentro del cual hay una imagen que queremos centrar

<div class="container"><img src="" /></div>

El proceso de centrar un objeto es calcular el alto del contenedor - el alto del objeto y dividirlo entre 2. Sin embargo, no siempre podemos determinar a priori la altura del objeto.

En este caso, posicionaremos la imagen a partir de la mitad del contenedor.  

 Sin embargo, luego debemos subir la imagen la mitad de su altura. Esto se realiza usando la propiedad transform: translateY(-50%)

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