内容中心

一种只需使用几行 CSS 的居中技术,适用于很多元素,但其副作用是使子项与最宽元素的宽度相匹配。

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

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

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

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