轻柔柔软

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

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

完整文章 · YouTube 上的视频 · GitHub 上的来源

<article class="gentle-flex">
 
<h1>Gentle Flex</h1>
</article>

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