การจัดให้เว็บไซต์อยู่กึ่งกลางแนวนอน (Horizontal Centering) เป็นเทคนิคพื้นฐานที่สำคัญ วิธีที่ง่ายและมีประสิทธิภาพที่สุดคือการใช้ margin: auto ร่วมกับ max-width บนคอนเทนเนอร์หลัก
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
background: rgb(255, 238, 0);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.main {
max-width: 600px;
margin: auto;
background: rgb(70, 32, 240);
color: white;
padding: 10px;
}
p { font-size: 40px; font-weight: lighter; }
</style>
</head>
<body>
<div class="main">
<h1>Center website horizontally example</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad nemo, nisi fugiat dolores quidem ipsam, quisquam sit, quos amet provident accusantium. Ab cumque est ut officia libero, quis non quidem eaque eligendi iusto numquam, optio magni corrupti, eum ad. </p>
</div>
</body>
</html>
หลักการทำงาน
- max-width: 600px - จำกัดความกว้างสูงสุดของคอนเทนเนอร์
- margin: auto - กระจายพื้นที่ว่างทางซ้ายและขวาเท่ากัน ทำให้อยู่กึ่งกลาง
- body background - สีพื้นหลังหน้าจอทั้งหมด (สีเหลือง) เพื่อให้เห็นชัดเจนว่าคอนเทนเนอร์อยู่กึ่งกลาง
เงื่อนไขที่ต้องมี
- Element ต้องเป็น Block-level element (เช่น div, main, section)
- ต้องมีความกว้าง (width หรือ max-width) น้อยกว่าคอนเทนเนอร์มารย父亲
- ไม่ต้องมี float หรือ position: absolute
วิธีอื่นๆ ในการจัดกึ่งกลาง
- Flexbox:
body { display: flex; justify-content: center; } - Grid:
body { display: grid; place-items: center; } - Transform:
.main { position: relative; left: 50%; transform: translateX(-50%); }
ข้อดีของวิธี margin: auto
- รองรับเบราว์เซอร์เก่าได้ดี (IE6+)
- โค้ดสั้น กำลังอ่านง่าย
- ทำงานร่วมกับ Responsive Design ได้ดี (ใช้ max-width แทน width คงที่)
