การจัดกึ่งกลางด้วย absolute ใน CSS

มีวิธีที่ฉลาดในการจัดกึ่งกลางองค์ประกอบ ผ่านการกำหนดตำแหน่งแบบ absolute คุณสามารถทำให้ องค์ประกอบวางตัวอยู่ตรงกลางหน้าต่างเบราว์เซอร์พอดี สำหรับการนี้ คุณไม่จำเป็นต้องกำหนดขนาด ให้องค์ประกอบและในขณะเดียวกันก็กำหนดตำแหน่ง จากทั้งสี่ด้าน:

html<div id="elem"></div>

css#elem {
  position: absolute;
  top:    30px;
  right:  30px;
  bottom: 30px;
  left:   30px;
  
  border: 1px solid green;
}

Результат: