ใช้ 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;
}