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

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

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