CSS จัดเรียงตำแหน่งไว้กึ่งกลาง บน ล่าง ซ้าย ขวา

การจัดเรียงสิ่งที่ต้องการไว้กึ่งกลาง ทั้งแนวตั้ง และแนวนอน โค้ดสั้น กระชับ รองรับบราวเซอร์สมัยใหม่
CSS


.middle {
width:100px;
height:100px;
border: 3px solid green;
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
}

HTML


<div class="middle">กึ่งกลาง</div>

ตัวอย่าง

กึ่งกลาง
ตัวอย่าง

กึ่งกลาง