CSS cuối cùng cũng có "căn giữa theo chiều dọc" vào năm 2024

• CSS cuối cùng đã bổ sung align-content cho layout mặc định, cho phép căn dọc chỉ với một thuộc tính CSS duy nhất
  • Phiên bản hỗ trợ: Chrome 123, Firefox 125, Safari 17.4
• Hiện tại, align-content không hoạt động trong layout mặc định (flow), nên phải chuyển sang flexbox hoặc grid
  • Đến năm 2024, cuối cùng các trình duyệt đã triển khai align-content cho layout Flow
  • Giờ đây có thể căn chỉnh chỉ với 1 thuộc tính CSS, không cần flexbox hay grid
  • Vì vậy, không cần bọc nội dung trong div nữa

Lịch sử của căn giữa theo chiều dọc

• Trong trình duyệt, căn giữa theo chiều dọc từ lâu không có cách làm đơn giản

Cách 1: ô bảng

• Mức độ hợp lý (Sanity): ★★★☆☆
• Có 4 layout chính là flow (mặc định), table, flexbox, grid, và cách căn nội dung khác nhau tùy theo layout
• Vì flexbox và grid được thêm vào khá muộn, ban đầu người ta dùng table

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

Cách 2: định vị tuyệt đối

• Mức độ hợp lý: ☆☆☆☆☆
• Vì layout flow không giúp ích gì nên phải lách bằng định vị tuyệt đối

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

Cách 3: nội dung inline

• Mức độ hợp lý: ☆☆☆☆☆
• Layout flow không giúp được việc căn nội dung. Nó chỉ cho phép căn dọc trong phạm vi một dòng
• Vậy nếu tạo một dòng có chiều cao bằng chiều cao của container thì sao?

<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;  
}  

• Rất dễ khiến mọi thứ trở nên kỳ quặc

Cách 4: flexbox một dòng

• Mức độ hợp lý: ★★★☆☆
• Flexbox chỉ bắt đầu được dùng rộng rãi sau hơn 20 năm kể từ khi web ra đời
• Ở chế độ một dòng (mặc định), dòng sẽ lấp đầy không gian theo chiều dọc và dùng align-items để căn các mục trong dòng

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

• Hoặc tạo dòng theo chiều dọc và dùng justify-content để căn các mục

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

Cách 5: flexbox nhiều dòng

• Mức độ hợp lý: ★★★☆☆
• Với flexbox nhiều dòng, có thể dùng align-content để căn các dòng

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

Cách 6: nội dung grid

• Mức độ hợp lý: ★★★★☆
• Vì grid xuất hiện muộn hơn nữa nên việc căn chỉnh trở nên đơn giản hơn đôi chút

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

Cách 7: ô grid

• Mức độ hợp lý: ★★★★☆
• align-content căn các ô trong container, còn align-items căn nội dung trong ô

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

Cách 8: margin auto

• Mức độ hợp lý: ★★★☆☆
• Trong layout flow, margin:auto có thể căn giữa theo chiều ngang nhưng không căn giữa theo chiều dọc
• Flexbox và grid không chia sẻ sự bất hợp lý này

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

Cách 9: bài viết này của năm 2024

• Mức độ hợp lý: ★★★★★
• Đáng lẽ ngay từ đầu trình duyệt phải bổ sung cái này

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

[tobesimple7]

Ôi~ có cả tính năng như thế này nữa~~

[seunggi]

Điều khó nhất trong khoa học máy tính - căn giữa

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

[mongsilsushi]

Cuối cùng cũng đến!

[sgwanlee]

CSS giờ dễ quá rồi hả? hahaha

[jwh926]

🙏🏻🙏🏻🙏🏻🙏🏻

[rulerwithcss]

ôi trời ơi, viền phô mai

[shpkc]

Cuối cùng cũng có!

[halfenif]

Muộn quá rồi! Muộn quá rồi! Muộn quá rồi!

[uoayop]

Cuối cùng cũng có

[aer0700]

Thật vui

[koyokr]

haha

[nemorize]

a-men

[carnoxen]

Liệu có nguy cơ các trang web hiện có sẽ bị vỡ cấu trúc vì thay đổi này không?

[bluekai17]

Tôi cũng tò mò về chỗ này.

[ng0301]

Cuối cùng cũng có!

[yatmak]

Cuối cùng thì thời đại Web 3.0 cũng đã đến rồi nhỉ.

[plaaat0102]

Phần bình luận tràn ngập niềm vui luôn hahaha..

[godppun]

Thật sự cuối cùng cũng có...

[kangkung9225]

Ồ...? Có phải làm thật à haha..

[qurare]

Cuối cùng cũng có

[savvykang]

WA!!!

[joyfui]

Wow!!!

[mkyoon]

Vui quá!

[wedding]

Vì chủ yếu làm phát triển ứng dụng nên khi hỗ trợ làm web, tôi chẳng suy nghĩ gì nhiều, cứ tìm kiếm rồi dùng flexbox và mặc nhiên nghĩ đó chính là căn giữa... Hóa ra trước giờ vốn không hề có thật sao, sốc quá.....

[illiil1lii]

Muya ho!

[huiya]

Cuối cùng cũng có!

[tjddnjsjo]

Tuyệt vời!

[pkj3186]

Cuối cùng cũng có!