รวมวิธีจัดกึ่งกลางด้วย CSS

จัดหน้าแบบไม่ต้องใช้ Javascript

ปัญหาอีกอย่างนึงสำหรับคนที่ทำงานด้าน Front-end แล้วก็ดูเหมือนว่าจะเป็นปัญหาที่พบบ่อยเสียด้วยคือการจัดการวัตถุ หรือหน้า layout ให้อยู่กึ่งกลาง ไม่ว่าจะเป็น กลางหน้าเว็บไซต์ หรือกลางของวัตถุใดวัตถุหนึ่ง วันนี้ผู้เขียนจึงขอรวบรวมรายการ CSS ที่ใช้จัดตำแหน่งทั้งแบบแนวนอน, แนวตั้ง มาไว้เลยดีกว่า ซึ่ง code ทั้งหมดเป็นเฉพาะของ CSS ล้วนๆ แบบไม่ต้องใช้ Javascript ช่วยแต่อย่างใด

จัดกึ่งกลางแนวนอน

text-align: center;

เป็นอะไรที่ง่ายที่สุด และมักจะนิยมใช้กันบ่อย สามารถใช้จัดการกับตัวหนังสือได้เป็นอย่างดี

display: block;
margin: auto;

snippet อีกอย่างที่มักจะใช้กับ block element อย่างเช่น div หรือสามารถนำไปประยุกต์ใช้กับรูปภาพได้อีกด้วย เพื่อให้รูปภาพอยู่กึ่งกลาง

text-align: center;
display: inline-block;

อันนี้ใช้บ่อยกับ list ที่อยู่ในรูปแบบเรียงกันในแนวนอน ใช้กับเมนูที่ใช้ ul, li ได้เลย

display: flex;
 justify-content: center;

snippet สุดท้ายที่พอจะรวบรวมได้เป็นการใช้ flex เข้ามาช่วย อันนี้เห็นไม่บ่อยนักเพราะ web broswer เก่าๆ อย่าง IE เวอร์ชั่น 9 ลงไปยังไม่รองรับ flexbox ส่วนคนที่ใช้ modern browser นั้นสามารถใช้งานได้ปรกติ และดูเหมือนจะใช้ง่าย, ได้ผลดีกว่า snippet อื่นๆ ด้วย

จัดกึ่งกลางแนวตั้ง

ส่วนที่เป็น block ให้ใช้

display: table;

และส่วนที่เป็น element ลูกที่อยู่ข้างในใช้

display: table-cell;
text-align: center;
vertical-align: middle;

เหมือนจะทำให้ div กลายเป็นการใช้งานแบบ table ซึ่งเราต้องสร้าง parent หรือที่เป็น block level ให้ใช้ display แบบ table เสียก่อน แล้วค่อยให้ child level เป็นแบบ table-cell ข้อดีคือ browser จะคำนวณระยะห่างจากบนลงล่าง และ ซ้ายมาขวาให้เอง ไม่ว่า content ของ child level จะยืดขนาดไหน

ตัวอย่างเหมือนกับที่ใช้บนเว็บ JindaTheme.com

อีกวิธีนึงจะเป็นการขยายจากตัวของ content เองด้วย padding เช่น

padding-top: 20px;
 padding-bottom: 20px;

อันนี้จะเหมาะกับประเภทของ link หรือ div หรือ input ที่บางครั้งอาจจะต้องการสร้างให้เหมือนกับปุ่ม หรือเป็น navigation

กึ่งกลางทั้งแนวตั้ง และนอน

วิธีแรกเป็นแบบโบราณ ที่ใช้กันมานมนาน แต่ยังใช้ได้อยู่จนถึงปัจจุบัน แล้วก็ใช้กับ web browser เก่าๆ อย่าง IE8 ด้วย ซึ่งข้อเสียมีเพียงอย่างเดียวคือจำเป็นต้องรู้ทั้งความกว้าง และความสูงที่แน่นอนเสียก่อน (อาจจะใช้ Javascript ช่วยเพื่อหาได้)

width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;

กล่าวคือ ถ้าความกว้าง และสูงมีค่าเท่าไหร่ ให้นำไปหารออกครึ่งนึงแล้วนำค่านั้นไปยัดลงกับ margin ครับ (ต้องเป็นค่าติดลบ)

วิธีสุดท้ายเป็นการใช้ flexbox ซึ่งจะง่าย และสั้นกว่าแบบแรกมาก แต่ข้อเสียก็คือไม่สามารถใช้ร่วมกับ web browser ที่ต่ำกว่า IE9(หรือ IE10) ได้

display: flex;
justify-content: center;
align-items: center;

เพียงใช้ snippet ข้างต้นไปใส่กับ block level เพียงเท่านี้ก็สามารถจัดตำแหน่งของ content ภายในให้อยู่แบบกึ่งกลางได้แล้ว ส่วนใครที่มีเทคนิคการจัดกึ่งกลางด้วย CSS สามารถแนะนำกันเข้ามาได้ทาง comment หรืออีเมล์ได้เลยครับ