Centrar verticalmente cualquier elemento con 3 líneas de CSS

Publicado el 26 de junio de 2020
Actualizado el 24 de mayo de 2022

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

Te recomiendo

Libros que me ayudan

Donde alojo mis sitios web

LucusHost, el mejor hosting

Sitio alojado en un servidor verde según The Green Web Foundation

Prueba Amazon Prime gratis

Aviso legal | Condiciones de contratación | Política de privacidad | Política de cookies
© 2017-2022 · Jose R. Bernabeu ·
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram Ir al contenido