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;
}