슈퍼센터
place-items: center
를 사용하여 요소를 상위 요소 내에 중앙에 배치합니다.
먼저 그리드를 표시 메서드로 지정한 다음 동일한 요소에 place-items: center
을 작성합니다. place-items
는 align-items
와 justify-items
를 한 번에 설정하는 약식 표현입니다. center
로 설정하면 align-items
및 justify-items
가 모두 center
로 설정됩니다.
.parent {
display: grid;
place-items: center;
}
이렇게 하면 고유 크기와 관계없이 콘텐츠가 상위 요소 내에서 완벽하게 중앙에 배치됩니다.
<div class="parent">
<div class="box" contenteditable="">
:)
</div>
</div>
.parent {
display: grid;
place-items: center;
/* Just for parent demo size */
height: 100vh;
}
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2023-10-25(UTC)
[null,null,["최종 업데이트: 2023-10-25(UTC)"],[],[]]