CSS ในปี 2024 ในที่สุดก็มี "การจัดกึ่งกลางแนวตั้ง" แล้ว

• ในที่สุด CSS ก็เพิ่ม align-content ให้ใช้ได้กับเลย์เอาต์ปริยาย ทำให้จัดแนวตั้งได้ด้วย พร็อพเพอร์ตี CSS เพียงบรรทัดเดียว
  • เวอร์ชันที่รองรับ: Chrome 123, Firefox 125, Safari 17.4
• ก่อนหน้านี้ align-content ใช้กับเลย์เอาต์ปริยาย (flow) ไม่ได้ จึงต้องเปลี่ยนไปใช้ flexbox หรือ grid
  • แต่ในปี 2024 ในที่สุดเบราว์เซอร์ก็รองรับ align-content ในเลย์เอาต์แบบ flow แล้ว
  • ตอนนี้จึงจัดกึ่งกลางได้ด้วยพร็อพเพอร์ตี CSS แค่ตัวเดียว โดยไม่ต้องใช้ flexbox หรือ grid
  • ดังนั้นจึงไม่จำเป็นต้องห่อคอนเทนต์ด้วย div เพิ่มอีกต่อไป

ประวัติของการจัดกึ่งกลางแนวตั้ง

• การจัดกึ่งกลางแนวตั้งในเบราว์เซอร์นั้นไม่มีวิธีที่ง่ายมานานมาก

วิธีที่ 1: table cell

• Sanity(นี่มันสมเหตุสมผลไหม?): ★★★☆☆
• มีเลย์เอาต์หลักอยู่ 4 แบบคือ flow (ค่าเริ่มต้น), table, flexbox, grid และการจัดวางคอนเทนต์จะแตกต่างกันไปตามเลย์เอาต์
• เนื่องจาก flexbox และ grid ถูกเพิ่มเข้ามาทีหลัง ช่วงแรกจึงใช้ table กัน

<div style="display: table;">  
  <div style="display: table-cell; vertical-align: middle;">  
    Content.  
  </div>  
</div>  

วิธีที่ 2: absolute positioning

• Sanity: ☆☆☆☆☆
• เพราะเลย์เอาต์แบบ flow ช่วยอะไรไม่ได้ จึงต้องอ้อมไปใช้ absolute positioning

<div style="position: relative;">  
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">  
    Content.  
  </div>  
</div>  

วิธีที่ 3: inline content

• Sanity: ☆☆☆☆☆
• เลย์เอาต์แบบ flow ไม่ได้ช่วยเรื่องการจัดคอนเทนต์ แต่อนุญาตให้จัดแนวตั้งภายในบรรทัดเดียวได้
• ถ้าอย่างนั้น ถ้าสร้างบรรทัดให้สูงเท่ากับความสูงของคอนเทนเนอร์ล่ะ?

<div class="container">  
  ::before  
  <div class="content">Content.</div>  
</div>  

.container::before {  
  content: '';  
  height: 100%;  
  display: inline-block;  
  vertical-align: middle;  
}  
.content {  
  display: inline-block;  
  vertical-align: middle;  
}  

• มีโอกาสพังเพี้ยนได้ง่ายมาก

วิธีที่ 4: flexbox บรรทัดเดียว

• Sanity: ★★★☆☆
• Flexbox เริ่มถูกใช้อย่างแพร่หลายหลังจากเว็บถือกำเนิดมาแล้วกว่า 20 ปี
• ในโหมดบรรทัดเดียว (ค่าเริ่มต้น) บรรทัดจะกินพื้นที่แนวตั้ง และใช้ align-items เพื่อจัดรายการภายในบรรทัด

<div style="display: flex; align-items: center;">  
  <div>Content.</div>  
</div>  

• หรือจะทำให้บรรทัดเป็นแนวตั้งแล้วใช้ justify-content เพื่อจัดรายการก็ได้

<div style="display: flex; flex-flow: column; justify-content: center;">  
  <div>Content.</div>  
</div>  

วิธีที่ 5: flexbox หลายบรรทัด

• Sanity: ★★★☆☆
• ใน flexbox แบบหลายบรรทัด สามารถใช้ align-content เพื่อจัดแนวบรรทัดได้

<div style="display: flex; flex-flow: row wrap; align-content: center;">  
  <div>Content.</div>  
</div>  

วิธีที่ 6: grid content

• Sanity: ★★★★☆
• Grid มาในภายหลังมากกว่า จึงทำให้การจัดแนวง่ายขึ้นเล็กน้อย

<div style="display: grid; align-content: center;">  
  <div>Content.</div>  
</div>  

วิธีที่ 7: grid cell

• Sanity: ★★★★☆
• align-content ใช้จัดเซลล์ภายในคอนเทนเนอร์ ส่วน align-items ใช้จัดคอนเทนต์ภายในเซลล์

<div style="display: grid; align-items: center;">  
  <div>Content.</div>  
</div>  

วิธีที่ 8: auto margin

• Sanity: ★★★☆☆
• ในเลย์เอาต์แบบ flow นั้น margin:auto ใช้จัดกึ่งกลางแนวนอนได้ แต่ใช้กับแนวตั้งไม่ได้
• ส่วน flexbox และ grid ไม่มีความไม่สมเหตุสมผลแบบนี้

<div style="display: grid;">  
  <div style="margin-block: auto;">  
    Content.  
  </div>  
</div>  

วิธีที่ 9: บทความนี้ในปี 2024

• Sanity: ★★★★★
• จริง ๆ แล้วเบราว์เซอร์ควรเพิ่มสิ่งนี้มาตั้งแต่แรก

<div style="align-content: center;">  
  <code>align-content</code> just works!  
</div>  

[tobesimple7]

โอ้~ มีฟีเจอร์แบบนี้ด้วย~~

[seunggi]

สิ่งที่ยากที่สุดในวิทยาการคอมพิวเตอร์ — การจัดกึ่งกลาง

https://tonsky.me/blog/centering/

[mongsilsushi]

ในที่สุด!

[sgwanlee]

CSS กลายเป็นเรื่องง่ายเกินไปแล้วเหรอ? 55555

[jwh926]

🙏🏻🙏🏻🙏🏻🙏🏻

[rulerwithcss]

โอ้พระเจ้า, ขอบชีส

[shpkc]

ในที่สุด !

[halfenif]

ช้าไปนะ! ช้าไปนะ! ช้าไปนะ!

[uoayop]

ในที่สุด

[aer0700]

น่ายินดี

[koyokr]

555

[nemorize]

a-men

[carnoxen]

มีความเสี่ยงไหมที่โครงสร้างของเว็บไซต์เดิมจะพังเละจากการเปลี่ยนแปลงนี้?

[bluekai17]

ฉันก็สงสัยตรงนี้เหมือนกัน

[ng0301]

ในที่สุด!

[yatmak]

ในที่สุดยุคของ Web 3.0 ก็มาถึงแล้วสินะ

[plaaat0102]

คอมเมนต์เต็มไปด้วยความสนุกเลย 555555..

[godppun]

ในที่สุด... จริง ๆ

[kangkung9225]

โอ๊ะ...? ต้องทำจริงเหรอ 555..

[qurare]

ในที่สุด

[savvykang]

ว้าว!!!

[joyfui]

ว้าว!!!

[mkyoon]

มีความสุขจัง!

[wedding]

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

[illiil1lii]

เยี่ยมไปเลย!

[huiya]

ในที่สุด!

[tjddnjsjo]

เยี่ยมไปเลย!

[pkj3186]

ในที่สุด!