วิธีจัดกึ่งกลาง `div` ใน CSS

วิธีจัดกึ่งกลางองค์ประกอบ

• การวางองค์ประกอบให้อยู่กึ่งกลางภายในองค์ประกอบแม่เป็นปัญหาที่ชวนปวดหัวมาอย่างยาวนาน
• เมื่อ CSS พัฒนาขึ้น ก็มีทางแก้หลากหลายมากขึ้น และตอนนี้ก็มีตัวเลือกให้ใช้อย่างกว้างขวาง
• บทช่วยสอนนี้จะช่วยให้เข้าใจ trade-off ระหว่างแนวทางต่าง ๆ และมอบกลยุทธ์สำหรับการจัดกึ่งกลางในทุกสถานการณ์

การจัดกึ่งกลางด้วย auto margin

• เมื่อต้องการวางองค์ประกอบให้อยู่กึ่งกลางในแนวนอน สามารถใช้ margin ที่มีค่า auto ได้
• ต้องกำหนดความกว้างขององค์ประกอบให้มีขอบเขต และ fit-content จะช่วยปรับขนาดองค์ประกอบให้พอดีกับเนื้อหา
• หากใช้พร็อพเพอร์ตี margin-inline ก็จะตั้งค่า margin-left และ margin-right เป็น auto พร้อมกันได้

การจัดกึ่งกลางด้วย Flexbox

• Flexbox ให้การควบคุมอย่างมากในการจัดวางกลุ่มไอเท็มตามแกนหลัก
• สามารถจัดองค์ประกอบเดี่ยวให้อยู่กึ่งกลางทั้งแนวนอนและแนวตั้งได้ และยังคงการจัดกึ่งกลางไว้ได้แม้เมื่อลูกองค์ประกอบไม่พอดีกับคอนเทนเนอร์
• สามารถใช้พร็อพเพอร์ตี flex-direction เพื่อควบคุมทิศทางการเรียงซ้อนของลูกองค์ประกอบหลายตัวได้

การจัดกึ่งกลางภายใน viewport

• บางกรณีจำเป็นต้องวางองค์ประกอบให้อยู่กึ่งกลางภายใน viewport แทนที่จะอิงกับคอนเทนเนอร์แม่
• สามารถใช้ position: fixed และ inset: 0px เพื่อตรึงองค์ประกอบไว้กับ viewport แล้วใช้ margin: auto เพื่อจัดให้อยู่กึ่งกลางทั้งแนวนอนและแนวตั้ง

การจัดกึ่งกลางองค์ประกอบที่ไม่ทราบขนาด

• หากไม่ทราบขนาดขององค์ประกอบอย่างชัดเจน สามารถใช้ fit-content เพื่อย่อองค์ประกอบให้พอดีกับเนื้อหาได้

การจัดกึ่งกลางด้วย CSS Grid

• วิธีที่กระชับที่สุดในการใช้ CSS Grid เพื่อจัดองค์ประกอบให้อยู่กึ่งกลางทั้งแนวนอนและแนวตั้งคือการใช้พร็อพเพอร์ตี place-content: center

ความแตกต่างจาก Flexbox

• CSS Grid ใช้อัลกอริทึมการจัดเลย์เอาต์ที่ต่างออกไป และในบางครั้งความซับซ้อนเพิ่มเติมอาจกลายเป็นปัญหาได้
• Flexbox คำนวณเปอร์เซ็นต์โดยอิงจากองค์ประกอบแม่ ขณะที่ CSS Grid คำนวณโดยอิงจาก grid cell

การจัดกึ่งกลางสแตกขององค์ประกอบ

• สามารถใช้ CSS Grid เพื่อกำหนดหลายองค์ประกอบให้อยู่ในเซลล์เดียวกันได้ ซึ่งจะทำให้องค์ประกอบซ้อนทับกันจากด้านหลังมาด้านหน้า

การจัดกึ่งกลางข้อความ

• ข้อความได้รับการจัดการแบบพิเศษใน CSS และสามารถใช้พร็อพเพอร์ตี text-align เพื่อจัดข้อความให้อยู่กึ่งกลางได้

อนาคตของการจัดกึ่งกลาง

• พร็อพเพอร์ตี align-content กำลังถูกนำมาใช้ใน Flow layout ด้วย ซึ่งใช้ควบคุมการจัดแนวเนื้อหาตามทิศทางบล็อก

ไปไกลกว่าการจำแพตเทิร์น

• เมื่อเข้าใจ CSS อย่างลึกซึ้ง ก็จะสามารถใช้สัญชาตญาณแก้ปัญหาได้แทนการพึ่งการจดจำ

การตัดสินใจว่าจะใช้วิธีไหน

• หากต้องการจัดองค์ประกอบเดี่ยวให้อยู่กึ่งกลางในแนวนอน สามารถใช้กลยุทธ์ auto margin ของ Flow layout ได้
• หากต้องการจัดกึ่งกลาง UI แบบลอยตัว เช่น modal หรือ banner สามารถใช้ Positioned layout ร่วมกับ auto margin ได้
• หากต้องการจัดกึ่งกลางสแตกขององค์ประกอบ สามารถใช้ CSS Grid ได้
• หากต้องการจัดกึ่งกลางข้อความ สามารถใช้ text-align ได้ และสามารถใช้ร่วมกับวิธีอื่นได้ด้วย
• สำหรับสถานการณ์อื่น ๆ ส่วนใหญ่สามารถใช้ Flexbox ได้ เพราะเป็นวิธีที่ยืดหยุ่นที่สุด และสามารถจัดลูกองค์ประกอบหนึ่งตัวหรือหลายตัวให้อยู่กึ่งกลางในแนวนอน/แนวตั้งได้

ความเห็นของ GN⁺

• ประเด็นสำคัญที่สุดของบทความนี้คือการช่วยให้เข้าใจวิธีจัดกึ่งกลางด้วย CSS ที่หลากหลาย
• ด้วยพัฒนาการของ CSS งานจัดกึ่งกลางที่เมื่อก่อนซับซ้อนมากได้กลายเป็นเรื่องง่ายขึ้นมาก ซึ่งเป็นประโยชน์อย่างมากต่อเว็บดีเวลอปเปอร์
• การเข้าใจและใช้งานเทคโนโลยี CSS สมัยใหม่อย่าง Flexbox และ CSS Grid กลายเป็นทักษะสำคัญอย่างยิ่งสำหรับงานออกแบบและจัดเลย์เอาต์บนเว็บ

[v08zbv8fvlkjasdflkj]

พอนึกดูแล้ว อยู่ ๆ ก็รู้สึกขัดตาเหมือนกันว่า GeekNews เองก็ยังไม่ได้จัดบทความให้อยู่กึ่งกลาง ฮือ 555

[joyfui]

ผมใช้ place-items: center; บ่อยอยู่แล้ว แต่ก็มีอีกหลายวิธีเหมือนกันนะ

[GN⁺]

ความคิดเห็นจาก Hacker News

• สรุปความคิดเห็นแรก:

  • มีความคิดเห็นหลากหลายว่าทำไมการจัดองค์ประกอบให้อยู่กึ่งกลางด้วย CSS จึงทำได้ยาก
  • เวลาที่คนส่วนใหญ่ถามว่าทำไมการจัดให้อยู่กึ่งกลางถึงยาก พวกเขามักหมายถึงแค่วิธีวางองค์ประกอบหนึ่งให้อยู่ตรงกึ่งกลางพอดีของอีกองค์ประกอบหนึ่ง
  • ใน HTML สมัยก่อนสามารถใช้แท็ก <table> เพื่อจัดให้อยู่กึ่งกลางได้ง่าย แต่ใน CSS กลับทำให้รู้สึกว่ายาก
  • แม้จะบอกว่า CSS เป็นเครื่องมือที่ดีกว่า แต่การที่แม้แต่การจัดกึ่งกลางพื้นฐานก็ยังทำได้ไม่ง่ายนั้นน่าผิดหวัง
  • ด้วยเหตุนี้จึงใช้เลย์เอาต์แบบตารางมาเป็นเวลานาน
  • ถึงอย่างนั้นก็ยังชอบ CSS

• สรุปความคิดเห็นที่สอง:

  • หลายคนไม่เข้าใจความซับซ้อนของการจัดเลย์เอาต์และการจัดรูปแบบหน้าเว็บแบบอัตโนมัติ
  • เป็นไปไม่ได้ที่จะทำให้นามธรรมของความซับซ้อนนี้กลายเป็นแค่คำสั่งง่าย ๆ แบบ "ทำให้เป็นอย่างที่ฉันต้องการ"
  • ยกตัวอย่างเว็บไซต์ของ Gwern Branwen ว่าสำคัญที่จะต้องจำกัดคอนเทนต์ให้สอดคล้องกับสไตล์ที่ต้องการ
  • การจัดเลย์เอาต์หน้าเว็บเป็นกระบวนการที่ซับซ้อนในการแสดงคอนเทนต์ให้เหมาะกับหน้าจอที่หลากหลาย
  • CSS อาจดูซับซ้อนสำหรับคนที่เพิ่งตัดสินใจจะสร้างหน้าเว็บตั้งแต่แรก แต่จริง ๆ แล้วมีทางเลือกที่กว้างมาก
  • จำเป็นต้องหาวิธีการหรือเครื่องมือที่เหมาะสมเพื่อให้ได้ผลลัพธ์ที่ต้องการ และจัดคอนเทนต์ให้อยู่ในรูปแบบที่เหมาะสม

• สรุปความคิดเห็นที่สาม:

  • การเข้าใจ box model ช่วยให้เข้าใจการวางตำแหน่งและการจัดกึ่งกลางใน CSS ได้ดีขึ้น
  • พร็อพเพอร์ตี display และ position เป็นพื้นฐานในการเรียนรู้การจัดวางตำแหน่ง
  • มีบทความที่เป็นประโยชน์เกี่ยวกับเรื่องนี้อยู่ใน MDN

• สรุปความคิดเห็นที่สี่:

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

• สรุปความคิดเห็นที่ห้า:

  • การ "จัดกึ่งกลาง" ใน CSS เป็นปัญหาคลาสสิก
  • CSS ไม่ชัดเจนนักเพราะเป็นชุดระบบที่ซับซ้อนซึ่งถูกออกแบบโดยหลายคณะกรรมการพร้อมกัน
  • CSS ดำรงอยู่ในสถานะของโมดูลย่อยแต่ละตัวท่ามกลางการเปลี่ยนแปลงอย่างต่อเนื่อง
  • นี่ไม่ใช่วิธีการพัฒนาซอฟต์แวร์ที่พึงประสงค์

• สรุปความคิดเห็นที่หก:

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

• สรุปความคิดเห็นที่เจ็ด:

  • หลายคนมีความไม่พอใจกับ CSS
  • ปัญหาหลักคือคำสั่งด้านสไตล์อาจขัดแย้งกันเอง หรือไม่ก็ล้มเหลวโดยไม่เกิดผลใด ๆ

• สรุปความคิดเห็นที่แปด:

  • ตามที่บทความกล่าวไว้ Flexbox แก้ปัญหาการจัดกึ่งกลางได้ในกรณีง่าย ๆ
  • ถ้า Flexbox แก้ไม่ได้ ก็เป็นเพราะกำลังทำงานที่ซับซ้อนกว่าการจัดกึ่งกลางแบบธรรมดา

• สรุปความคิดเห็นที่เก้า:

  • วิธีหลักที่ตนใช้ในการจัดกึ่งกลางคือ position: absolute, left: 50%, transform: translateX(-50%)

• สรุปความคิดเห็นที่สิบ:

  • การจัด div ให้อยู่กึ่งกลางใน CSS ยากมาก จนเป็นเหตุผลที่ทำให้เลิกพัฒนาเว็บ