Center elements ด้วย CSS ดูยากกว่าที่ควรจะเป็น โดยเฉพาะต้อง center ทั้งแนวนอนและแนวตั้ง วันนี้แสดงวิธีทำ ทั้ง modern CSS และ older (แตะยัง relevant) techniques
Center Text Elements Horizontally
Center text แนวนอนตรงไปตรงมา ใช้ text-align property ค่า center
h1 { text-align: center; }ทำงานกับ text element ใดๆ
Center Block Elements (non-text) Horizontally
Center non-text element แนวนอน ใช้ margin property left/right = auto ต้องระบุ width ของ element:
.center-horizontal { margin-left: auto; margin-right: auto; width: 100px; /* or max-content;*/ }หมายเหตุ: ไม่อยากกำหนด fixed width ใช้ width: max-content element จะขยายตาม content width
Block vs Inline Block Elements
.center-horizontal class ข้างต้น center block elements ทุกตัว — แต่ ไม่ใช่ inline elements HTML บาง elements เป็น inline default <button> element มี default display: inline-block style แตะทำให้เป็น block element ได้ง่าย เพิ่ม display: block ใน CSS class:
.center-horizontal { display: block; margin-left: auto; margin-right: auto; width: 100px; /* or max-content;*/ }ตอนนี้ทำงานกับ element ใดๆ
Center Horizontally with Flexbox
Modern flexbox property center แนวนอนง่ายมาก แทน .center-horizontal class ด้วย:
.center-horizontal { display: flex; justify-content: center; }<div> element จะ centered
แตะ button element ไม่ centered ทำไม?
<button> element special element ไม่ใช่ <div> ไม่ได้เป็น flex-container
แตะ buttons เป็น flex-item ถ้าใส่ button ใน flex-container center จะทำงาน ลองเพิ่ม HTML:
<div class="center-horizontal"> <button>Center me</button> </div>ตอนนี้ทำงาน! แค่เอา center class ออกจาก button ใช้ wrap ใน parent <div> container
Tip: <img> element ไม่ได้เป็น flex-container แต่เป็น flex-item ได้เหมือน button
-
Center Elements Vertically
CSS beginners มักปัญหา center elements แนวตั้ง Flexbox ทำง่าย แต่ก่อนหน้านั้นดู older CSS methods
อาจคิด margin-top/bottom auto — แต่ no
ต้องมี parent container ที่มี specified height เพื่อ vertical centering เพิ่ม HTML:
<section class="section"> <div class="center-vertical">Center me vertically</div> </section>CSS สำหรับ section class (parent):
.section { height: 200px; border: 1px solid black; }Border เพื่อให้เห็นชัด
CSS สำหรับ child element:
.center-vertical { position: relative; top: 50%; transform: translateY(-50%); }เสร็จ!
Center Vertically with Flexbox
Center แนวตั้งด้วย flexbox ต้องมี parent flex container ลบ center-vertical class จาก child element เพิ่ม flexbox properties 2 ตัวให้ .section class:
.section { height: 200px; border: 1px solid black; display: flex; align-items: center; }ตอนนี้ child element vertically centered ด้วย flexbox
Center Element Both Vertically and Horizontally
Center ทั้งแนวตั้งและแนวนอน ต้องการเพียง properties ไม่มาก เริ่มจาก old CSS method
Markup:
<section class="section"> <div class="center-vertical-and-horizontal"> Center me vertically & horizontally </div> </section>CSS:
.section { height: 200px; border: 1px solid black; } .center-vertical-and-horizontal { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; }คล้าย "center elements vertically" example (ไม่ flexbox) เพิ่ม left: 50% และ transform ระบุ X และ Y axis ใน declaration เดียว: (-50%, -50%) ค่าแรก = X ค่าที่สอง = Y
Center Vertically and Horizontally with Flexbox
Flexbox trick เดียวกัน ลบ center-vertical-and-horizontal class จาก child element .section class ใช้ CSS:
.section { height: 200px; border: 1px solid black; display: flex; align-items: center; justify-content: center; }ต่างจาก center vertically example เดิมแค่ justify-content: center declaration จัดการ horizontal centering
Center Horizontally & Vertically with CSS Grid
Modern-modern CSS grid property จัดการ vertical/horizontal centering แทน .section class ด้วย:
.section { height: 200px; border: 1px solid black; display: grid; place-items: center; }แค่ 2 properties (display: grid & place-items:center) ทำงานกับ CSS grid สะดวกมาก!
เสียดาย CSS grid ไม compatible ทุก modern browsers และไมทำงาน 100% ใน popular CMS/frameworks อย่าง WordPress — ยัง
ดู CSS grid compatibility status ปัจจุบัน
