Centrar verticalmente cualquier elemento con 3 líneas de CSS

Publicado el 26 de junio de 2020
Actualizado el 9 de julio de 2020

Puedes centrar verticalmente con css cualquier elemento de una página web con sólo tres líneas de código (sin contar las variantes para asegurar la compatibilidad don diferentes navegadores), sin necesidad de conocer su altura.

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

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.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram