Centrar verticalmente cualquier elemento con 3 líneas de CSS

Centrar verticalmente usando la propiedad CSS transform

Por lo general, esto suele hacerse con un posicionamiento absoluto o estableciendo alturas de línea, pero esto requiere conocer la altura del elemento o que sólo funcione en texto de una sola línea.

Así que, para centrar verticalmente cualquier elemento podemos usar este simple código:

.vcentrado {
            position: relative;
            top: 50%;
            -webkit-transform: perspective(1px) translateY(-50%);
            -ms-transform: perspective(1px) translateY(-50%);
            transform: perspective(1px) translateY(-50%);
}Lenguaje del código: PHP (php)

Es una técnica similar al método de posición absoluta, pero con la ventaja de que no tenemos que establecer ninguna altura en el elemento o propiedad de posición en el elemento primario.

Funciona directamente, incluso en Internet Explorer 9.

Asegurando la compatibilidad con navegadores

Para garantizar la compatibilidad con distintos navegadores, agregamos los prefijos -ms-transform y -webkit-transform con lo que nos aseguramos de que funciona en todas partes.

Afinando el código

Y para evitar que los elementos se coloquen en un «medio píxel», pudiéndose hacer borrosos, establecemos la perspectiva del elemento en perspective(1px).

Puedes, como en este caso, crear una clase para el centrado vertical en CSS o añadir estas líneas de código a cualquier elemento que quieras centrar verticalmente en tu hoja de estilos.