อ่อนโยน

เทคนิคการจัดกึ่งกลางที่แสดงเฉพาะเนื้อหาและไม่เปลี่ยนขนาดในระหว่างกระบวนการ

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

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

HTML

<article class="gentle-flex">
  <h1>Gentle Flex</h1>
</article>

CSS


        .gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}