Flexbox Centering: จัดกึ่งกลางแบบสมบูรณ์แบบ
ใช้ display: flex ร่วมกับ justify-content: center (แนวนอน) และ align-items: center (แนวตั้ง) บน Container จัดให้ปุ่ม (หรือองค์ประกอบใดๆ) อยู่ตรงกลางทั้ง 2 แกน
โค้ดตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.centered {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid rgb(0, 70, 128);
}
button {
font-size: 18px; border: none; padding: 10px;
background-color: darkblue; color: white;
}
</style>
</head>
<body>
<h1>ตัวอย่าง Centering</h1>
<div class="centered"><button>ปุ่มนี้อยู่กึ่งกลาง</button></div>
</body>
</html>เงื่อนไขสำคัญ
- Container ต้องมีความสูง (height) กำหนดไว้ (เช่น 200px, 100vh)
- ใช้
display: flexบน Container ไม่ใช่บนปุ่ม - ทำงานกับทุกประเภท child: button, div, img, text, iframe
วิธีอื่นๆ (อ้างอิง)
- Grid:
.centered { display: grid; place-items: center; }– สั้นกว่า - Absolute + Transform:
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)– ใช้ได้กับ absolute positioning - Table-cell:
display:table-cell; vertical-align:middle; text-align:center– แบบเก่า
Flexbox/Grid เป็นมาตรฐานปัจจุบัน ใช้ง่าย รองรับ responsive และไม่ต้องคำนวณขนาดล่วงหน้า
