콘텐츠 센터

CSS 몇 줄만으로 구성된 중앙 정렬 기법은 여러 요소에 효과적이지만 하위 요소를 가장 넓은 요소의 너비와 일치시키는 부작용이 있습니다.

이 기법에 관한 자세한 내용과 언제 이 기법이 효율적인지 알아보려면 전체 문서를 참고하세요.

전체 기사 · YouTube 동영상 · GitHub에서 소스

HTML

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

CSS


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