¿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:
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: 0, bottom: 0 y margin: auto se encargan de centrar el elemento .child verticalmente. Mientras que left: 0, right: 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.
El atributo Placeholder en HTML: qué es y cómo se utiliza
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!
