Centrado vertical de elementos con CSS3

No existe una propiedad de CSS que centre verticalmente un elemento dentro de otro. Gracias a las propiedades de transformación de CSS3 podemos centrar elementos verticalmente sin necesidad de conocer el alto del elemento contenedor.

Lo hariamos con la siguiente definición:

.centrado_vertical {

position:relative;
top: 50%;
transform: translateY(-50%);

}

Al aplicar esta clase a un elemento, éste quedará centrado verticalmente con respecto al que lo contiene. Funciona en las últimas versiones de todos lo navegadores. Solamente Safari (8) necesita del prefijo -webkit-transform.

Es posible que en algunos navegadores se vea borroso el elemento centrado. Esto es debido a la posibilidad de que al mover un 50% el elemento quede en “medio pixel”. Para evitar esto se le puede aplicar al elemento padre el siguiente estilo:

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;