Domina todas las técnicas modernas de centrado y alineación: Flexbox, Grid, margin auto y place-* properties. Olvídate de los hacks del pasado.
El centrado en CSS pasó de ser un meme a una tarea trivial gracias a Flexbox y Grid.
Aprenderás cuándo usar cada técnica: place-items, place-content, justify/align, y margin auto.
Con ejemplos interactivos y casos reales: modales, cards, layouts completos.
Por qué era tan difícil antes y cómo lo resolvemos hoy.
Antes de Flexbox y Grid, centrar verticalmente requería hacks: position absolute con transform, table-cell, line-height igual al height, o márgenes negativos calculados.
Estos métodos eran frágiles, poco semánticos y fallaban con contenido dinámico.
Desde 2017, con Flexbox y Grid ya soportados en todos los navegadores, tenemos soluciones nativas, predecibles y mantenibles.
Main axis vs cross axis, y cómo cambian según el contexto.
En Flexbox, el eje principal (main axis) es horizontal por defecto (flex-direction: row), y el cruzado (cross axis) es vertical.
Si cambias a flex-direction: column, los ejes se invierten: main = vertical, cross = horizontal.
justify-content siempre controla el main axis, align-items el cross axis.
En Grid, justify-* afecta al eje horizontal (inline), align-* al vertical (block), independientemente de la dirección del texto.
Cuándo usar cada una según tu caso de uso.
1. Grid + place-items: center → La forma más corta para centrar un hijo único o múltiples hijos independientes.
2. Flexbox + justify-content + align-items → Ideal para centrar con contenido dinámico o múltiples elementos en fila/columna.
3. margin: auto en contexto Flex/Grid → Centra el elemento absorbiendo todo el espacio disponible, útil cuando solo un hijo necesita centrarse.
4. Grid + place-content: center → Centra toda la rejilla (grupo de elementos) dentro del contenedor, no cada elemento individual.
La diferencia que nadie explica bien.
place-items alinea cada elemento individual dentro de su celda/espacio asignado.
place-content alinea el bloque completo de contenido (todas las celdas juntas) dentro del contenedor.
Si tienes un solo elemento, ambos dan el mismo resultado visual.
Con múltiples elementos, place-items los centra por separado; place-content centra el grupo como un bloque.
Qué técnica elegir según tu layout.
Resumen rápido con lo esencial.
Domina todas las técnicas modernas de centrado y alineación: Flexbox, Grid, margin auto y place-* properties. Olvídate de los hacks del pasado.
Código del tema: display: grid; gap: 1rem;
Por qué era tan difícil antes y cómo lo resolvemos hoy.
Antes de Flexbox y Grid, centrar verticalmente requería hacks: position absolute con transform, table-cell, line-height igual al height, o márgenes negativos calculados.
Estos métodos eran frágiles, poco semánticos y fallaban con contenido dinámico.
Desde 2017, con Flexbox y Grid ya soportados en todos los navegadores, tenemos soluciones nativas, predecibles y mantenibles.
Main axis vs cross axis, y cómo cambian según el contexto.
En Flexbox, el eje principal (main axis) es horizontal por defecto (flex-direction: row), y el cruzado (cross axis) es vertical.
Si cambias a flex-direction: column, los ejes se invierten: main = vertical, cross = horizontal.
justify-content siempre controla el main axis, align-items el cross axis.
En Grid, justify-* afecta al eje horizontal (inline), align-* al vertical (block), independientemente de la dirección del texto.
Cuándo usar cada una según tu caso de uso.
1. Grid + place-items: center → La forma más corta para centrar un hijo único o múltiples hijos independientes.
2. Flexbox + justify-content + align-items → Ideal para centrar con contenido dinámico o múltiples elementos en fila/columna.
3. margin: auto en contexto Flex/Grid → Centra el elemento absorbiendo todo el espacio disponible, útil cuando solo un hijo necesita centrarse.
4. Grid + place-content: center → Centra toda la rejilla (grupo de elementos) dentro del contenedor, no cada elemento individual.
/* Técnica 1: Grid place-items (LA MÁS CORTA) */
.parent { display: grid; place-items: center; min-height: 100vh; }
/* Técnica 2: Flexbox clásico */
.parent { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
/* Técnica 3: margin auto (ELEGANTE) */
.parent { display: flex; }
.child { margin: auto; }
/* Técnica 4: place-content (centra el grupo) */
.parent { display: grid; place-content: center; min-height: 100vh; }La diferencia que nadie explica bien.
place-items alinea cada elemento individual dentro de su celda/espacio asignado.
place-content alinea el bloque completo de contenido (todas las celdas juntas) dentro del contenedor.
Si tienes un solo elemento, ambos dan el mismo resultado visual.
Con múltiples elementos, place-items los centra por separado; place-content centra el grupo como un bloque.
/* place-items: cada hijo se centra en su propio espacio */
.grid-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center; /* cada celda centra su contenido */
}
/* place-content: el grupo entero se centra */
.grid-content {
display: grid;
grid-template-columns: repeat(3, 100px);
place-content: center; /* la rejilla de 3 columnas se centra en el espacio */
min-height: 100vh;
}Qué técnica elegir según tu layout.
Resumen rápido con lo esencial.
Ya no necesitas position absolute, transform, table-cell ni márgenes negativos. Flexbox y Grid resuelven todo de forma declarativa.
Para centrar un elemento, Grid + place-items: center es la forma más corta (1 línea vs 2-3 en Flexbox).
Ideal cuando tienes contenido dinámico, múltiples elementos en fila/columna, o necesitas control del espaciado con gap.
En contextos Flex/Grid, margin: auto absorbe todo el espacio disponible, centrando el elemento sin propiedades extra.
place-items = align-items + justify-items. place-content = align-content + justify-content. Escribe menos, haz lo mismo.
En Flexbox, si usas flex-direction: column, justify-content controla el eje vertical y align-items el horizontal. Entiende los ejes, no memorices.
Para centrar verticalmente en toda la pantalla, asegúrate de que el contenedor tenga min-height: 100vh (o height: 100vh).
Refuerza la diferencia entre justificar y alinear segun direccion del contenedor.
