コンテンツ センター

センタリングは数行の CSS で完了し、多くの要素に適していますが、子を最も幅の広い要素の幅に合わせるという副作用があります。

この手法の詳細と効率的なケースについては、この記事の全文をご覧ください。

記事全文 · YouTube の動画 · GitHub 上のソース

HTML

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

CSS


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