Guía para centrar un div con CSS

0 Flares Filament.io 0 Flares ×

A lo largo de mi vida como programador web me he encontrado con diferentes formas de centrar un div y su contenido a continuación te lo muestro:

GRID

Fácil de recordar y funciona muy bien para layouts grandes. * Ojo, los elementos que contiene tomarán la anchura del elemento más ancho.

FLEX

Una solución un poco hacky usando los márgenes. No es elegante

pero te puede sacar de apuros para iconos y elementos pequeños.

ABSOLUTE

Posiciona de forma absoluta va a lograr centrar el elemento sí o sí. Útil para modales y ventanas que tienen que centrarse por encima de todo. Sería la forma bruta.

FLEX CENTER

Larga de recordar, pero vale la pena. Usando flex podemos alinear los elementos en el centro y justificar su contenido también en el centro.

¿Qué te parece?

Fuente: https://twitter.com/midudev

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

Deja un comentario

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

Scroll al inicio