內容中心

中心技術僅只有幾行 CSS,適用於許多元素,但會造成子項符合最寬元素寬度。

如要進一步瞭解這項技巧及其有效性,請參閱全文

完整文章 · YouTube 影片 · GitHub 上的資料來源

HTML

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

CSS


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