Gentle Flex

A centering technique that only aligns content and doesn't change their size during the process.

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="gentle-flex">
  <h1>Gentle Flex</h1>
</article>

CSS


        .gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}