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

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

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

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

ใช้วิธีที่อธิบายไว้สร้างบล็อก ที่อยู่กลางหน้าจอและมีระยะห่าง จากทุกด้านด้านละ 100px

ใช้วิธีที่อธิบายไว้สร้างบล็อก ที่มีระยะห่างจากขอบบนของหน้าจอ 100px, จากขวา - 200px, จากล่าง - 50px, และจากซ้าย - 10px