No puedo centrar un div (sí, ese meme)
yorman R.
Nivel 3 ·
Tengo una caja de 300px de ancho que quiero centrar horizontal y verticalmente en toda la pantalla. Probé con text-align: center y vertical-align: middle y no pasa nada. Ayuda.
Respuestas 6
emanuel D.
Nivel 3 ·
0 0 text-align centra contenido en línea (texto, inline-block), no bloques. Y vertical-align solo funciona en elementos inline o celdas de tabla. Por eso no te anda.
Yesenia P.
Nivel 3 ·
1 0 Con flexbox en el contenedor padre: .padre { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
Feli2007
Nivel 3 ·
0 0 Con grid es todavía más corto: .padre { display: grid; place-items: center; min-height: 100vh; }
andrea F.
Nivel 3 ·
1 0 Si solo querés centrar horizontalmente un bloque con ancho fijo: margin: 0 auto; de toda la vida.
yorman R.
Nivel 3 ·
0 0 Con grid y place-items me anduvo al toque. No sabía que el padre tenía que tener altura. Gracias!
Areli P.
Nivel 3 ·
0 0 Exacto, ese es el detalle: si el padre mide lo mismo que la caja, no hay nada que centrar verticalmente. Por eso el min-height.