轻柔柔软

一种居中技术，仅对齐内容，在此过程中不会改变内容大小。

有关此方法及其效率的使用场景，请参阅完整文章。

完整文章 · YouTube 上的视频 · 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;
}