Central de conteúdo

Uma técnica de centralização com apenas algumas linhas de CSS funciona muito bem para muitos elementos, mas faz com que os filhos correspondam à largura do elemento mais largo.

Consulte o artigo completo para conhecer muitos outros detalhes sobre essa técnica e quando ela é eficiente.

Artigo completo · Vídeo no YouTube · Fonte no GitHub

HTML

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

CSS

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