LucusHost, el mejor hosting

Centrar verticalmente cualquier elemento con 3 líneas de CSS

Publicado el 26 de junio de 2020
Actualizado el 6 de octubre de 2021

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.

Algunos de los enlaces de este artículo pueden corresponder a programas de afiliación de herramientas que uso, he probado o sé que son de utilidad.

El uso de mis enlaces de afiliado nunca aumenta el precio para ti, pero me dan una pequeña comisión que me permite seguir generando más y mejor contenido.

Por ejemplo, si compras en Amazon, puedes ayudarme haciéndolo con mi enlace de referencia:
https://olladiscoduro.es/amazon

¡Gracias de antemano por tu apoyo!