Inhaltscenter

Eine Zentrierungsmethode, die nur wenige CSS-Zeilen umfasst, funktioniert bei vielen Elementen gut, hat aber den Nebeneffekt, dass untergeordnete Elemente der Breite des breitesten Elements entsprechen.

Im vollständigen Artikel finden Sie viele weitere Details zu dieser Methode und dazu, wann sie effizient ist.

Vollständiger Artikel · Video auf YouTube · Quelle auf GitHub

HTML

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

CSS

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