ป๊อบ' พล็อต

เทคนิคการจัดกึ่งกลางเพื่อวางซ้อนเนื้อหาอื่นๆ

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

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

HTML

<article>
  <h1 class="pop-n-plop">Pop n' Plop</h1>
</article>

CSS


        article {
  position: relative;
}

.pop-n-plop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}