Este post fue visto: 91

¿Cómo centrar perfectamente un DIV? Es la pregunta que me hacía en mis primeras épocas de programadora, y de la que me hubiese gustado tener la respuesta posta para facilitar mi trabajo. Y para lucirme entre los demás programadores, ja 😎. Centrar un elemento DIV tanto vertical como horizontal fue siempre un desafío para expertos en las viejas épocas, sobre todo cuando necesitábamos una solución que funcionara en todos los navegadores (sin tener que recurrir a hacks). Con el nuevo HTML5 y CSS3, todo esto nos facilitó la tarea.

En este post vamos a analizar tres métodos para centrar un DIV horizontal y verticalmente con HTML y CSS, cada uno con dos variantes distintas, con ejemplos de CodePen para que lo veas funcionando. No solo se ven bien y funcionan, sino que además mantienen sus virtudes a través de los distintos dispositivos.

Veamos:
.

Método 1: Flexbox

El método Flexbox es casi el Superman del diseño web responsivo debido a su facilidad de uso, flexibilidad y resistencia en los diferentes dispositivos. En esta primera variante, aplicamos las siguientes propiedades CSS al contenedor padre solamente:

  • Abre tu cuenta en Payoneer y obtén 25 dólares de regalo!
  • Neolo Servicios de Hosting -- El blog de aleare.design

Este código hace uso de las propiedades display: flex para establecer el contenedor como un flexbox, justify-content: center para centrar horizontalmente y align-items: center para centrar verticalmente.

Otra variante con Flexbox es ésta:

La diferencia aquí es que, en vez de usar la propiedad align-items en .container, que establece la alineación para todos los elementos hijos con respecto al eje vertical (línea imaginaria que divide la pantalla a la mitad), usamos align-self en .child que establece la alineación de los elementos flex individuales en el eje vertical.

Para todos los casos, para que el DIV tenga una referencia desde dónde ubicarse, colocamos height: 100vh que establece el 100% de la altura total del viewport. Entonces, no importa qué altura tenga la parte visible de mi navegador, el DIV calculará cuál es esa altura total primero para luego ponerse justo en la mitad. Un golazo.
.

Método 2: Grid

Otra opción moderna y eficaz es usar el método Grid, que nos ofrece un control preciso sobre el diseño y la disposición de los elementos. Para centrar un elemento DIV, aplicamos las propiedades CSS al contenedor padre:

Aquí, display: grid establece el contenedor como un grid container, mientras que place-items: center centra los elementos tanto vertical como horizontalmente

Aquí otra variante con Grid, pero esta vez más simplificado, pues aplicamos solo una propiedad tanto al contenedor padre como al hijo:

Lo bueno, si breve, dos veces bueno, ¿no les parece?

.

Método 3: Transform & Position

Este método tiene sus años pero sigue siendo útil. Utiliza las propiedades transform y position para lograr el centrado. Solo se necesitan un par de líneas más de código que los anteriores.

Aplicamos position: relative al contenedor padre y position: absolute al elemento hijo (el DIV «child») que queremos centrar. Luego, utilizamos top: 50% y left: 50% para mover el elemento al centro del contenedor y transform: translate(-50%, -50%) para ajustarlo perfectamente al centro y voilá.

Y aquí va la otra variante utilizando el mismo método:

Aquí vemos que top: 0bottom: 0 y margin: auto se encargan de centrar el elemento .child verticalmente. Mientras que left: 0right: 0 y margin: auto, se ocupan de centrarlo horizontalmente.

Esta variante no la conocía y la probé especialmente para este post. Como ven, funciona genial.

Bueno espero que estos tres métodos para centrar un DIV horizontal y verticalmente con HTML y CSS, te sirvan para aplicar a tu código. Si conocés otro ejemplo y te gustaría compartirlo, dejame tu comentario y lo chequeamos!

 

 

Avatar

Escribió:

Alejandra Arellano

¡Hola Mundo! Soy diseñadora gráfica y web, programadora HTML/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicación Digital.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar

Sobre mí

¡Bienvenidos a mi blog! Mi nombre es Alejandra y soy diseñadora gráfica y web, también programadora, community manager, redactora e ilustradora.

Fundadora de aleare design estudio de diseño y comunicación digital, desde el 2008 brindando servicios a empresas y agencias digitales en varias ciudades de Argentina y también en México, España, Francia y Noruega.

Mi Filosofía

“Tienen que encontrar eso que aman […]. Su trabajo va a llenar gran parte de sus vidas […] y la única forma de hacer un gran trabajo es amando lo que hacen. Si todavía no lo han encontrado, sigan buscando. No se detengan […]. Sean curiosos. Sean inquietos.”

Steve Jobs
Discurso de apertura, Universidad de Stanford, 2005