슈퍼센터

place-items: center를 사용하여 요소를 상위 요소 내에 중앙에 배치합니다.

먼저 그리드를 표시 메서드로 지정한 다음 동일한 요소에 place-items: center을 작성합니다. place-items는 align-items와 justify-items를 한 번에 설정하는 약식 표현입니다. center로 설정하면 align-items 및 justify-items가 모두 center로 설정됩니다.

.parent {
  display: grid;
  place-items: center;
}

이렇게 하면 고유 크기와 관계없이 콘텐츠가 상위 요소 내에서 완벽하게 중앙에 배치됩니다.

HTML

<div class="parent">
  <div class="box" contenteditable="">
    :)
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;

  /* Just for parent demo size */
  height: 100vh;
}