Content Center

A centering technique that is only a few lines of CSS, works great for many elements, but has the side effect of making children match the width of the widest element.

See the full article for many more details about this technique and when it's efficient.

Full article · Video on YouTube · Source on Github

HTML

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

CSS


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