Centro de contenido

Una técnica de centro que consiste en solo unas pocas líneas de CSS y funciona muy bien con muchos elementos, pero tiene el efecto secundario de hacer que los elementos secundarios coincidan con el ancho del elemento más ancho.

Consulta el artículo completo para conocer más detalles sobre esta técnica y cuándo es eficiente.

Artículo completo · Video en YouTube · Fuente en GitHub

HTML

<article class="content-center">
  <h1>Content Center</h1>
</article>

CSS


        .content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}