ศูนย์เนื้อหา

เทคนิคการจัดกึ่งกลางที่มี CSS เพียงไม่กี่บรรทัดนั้นทำงานได้ดีสำหรับหลายองค์ประกอบ แต่มีผลข้างเคียงจากการทำให้รายการย่อยตรงกับความกว้างขององค์ประกอบที่กว้างที่สุด

อ่านบทความฉบับเต็มสำหรับรายละเอียดเพิ่มเติมเกี่ยวกับเทคนิคนี้และกรณีที่มีประสิทธิภาพ

บทความฉบับเต็ม · วิดีโอบน YouTube · แหล่งข้อมูลเกี่ยวกับ GitHub

HTML

<article class="content-center">
  <h1>Content Center</h1>
</article>

CSS


        .content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}