กึ่งกลางภาพ

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