Canh giữa dễ như bỡn với `align-content`

Firefox 125 vừa được phát hành ngày 16.04.2024 đã hỗ trợ thuộc tính align-content cho nội dung dạng block. Cùng với Chrome/ Edge và Safari, giờ đây việc canh giữa nội dung theo chiều dọc đã trở nên vô cùng dễ dàng.

align-content là gì?

Xửa xừa xưa mỗi khi muốn canh giữa nội dung, có thể bạn đã dùng đến “tuyệt chiêu tà đạo” này:

.vcenter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Flex và sau này là grid xuất hiện đã làm cho mọi chuyện bớt rối rắm và tự nhiên hơn.

.vcenter {
  display: flex;
  align-items: center;
}

Nhưng nhiều khi chúng ta sử dụng flex/ grid chỉ với duy nhất mục đích này. Xấu hay tốt thì mình không rõ, nhưng từ nay bạn có thể áp dụng ngay thuộc tính align-content: center; trên nội dung dạng block để có kết quả tương tự.

.vcenter {
  display: block;
  align-content: center;
}

Theo lý thuyết thì các giá trị để phân bố phần tử con (distributed alignment) như space-between, space-evently, và phân bố dựa vào baseline (baseline alignment) cũng phải được hỗ trợ, nhưng mình thử qua trên Firefox và Chrome thì chỉ thấy dùng với baseline là được thôi. Safari có chút phản ứng khi dùng align-content: space-evenly nhưng có gì đó không đúng lắm.

Trăm nghe không bằng một thấy, bạn có thể xem qua ví dụ dưới đây để thử nghiệm các giá trị khác nhau của align-content khi được áp dụng cho nội dung dạng block.

Kết

Bài viết ngắn ngủn đến đây là kết thúc rồi. Từ nay hãy thêm align-content: center mỗi khi cần canh giữa nhe.

Ngoài lề: Tác giả của font Fira Code Nikita Prokopov có một bài viết khá vui giới thiệu các trường hợp canh giữa trật lất trong các ứng dụng của Apple, Microsoft, Github, v.v.