Căn giữa theo chiều dọc trong CSS

CSS vẫn còn gây nhầm lẫn cho hầu hết chúng ta: nó có hàng trăm thuộc tính được đặt tên kém, mỗi thuộc tính có thể ảnh hưởng đến kết quả theo những cách không trực quan. Việc định vị theo chiều dọc của các phần tử trong phát triển web rất phức tạp và thường gây đau đầu trong quá khứ. Nhưng may mắn thay những ngày đó đã qua.


Thật khó tin: Vào năm 2024, bây giờ có thể đạt được kết quả mong muốn chỉ với một dòng CSS:

0f1273b25d9806459716

0f1273b25d9806459716

Trước đây, người ta sử dụng nhiều lựa chọn khác nhau để đạt được kết quả tương tự:

Flexbox

0f1273b25d9806459716

Định vị tuyệt đối

0f1273b25d9806459716

Khối nội tuyến

0f1273b25d9806459716

Các Hỗ trợ trình duyệt cho nội dung căn chỉnh hiện nay đã rất tốt và không còn lý lẽ chính đáng nào cho việc sử dụng các kỹ thuật lỗi thời nữa. Trong số những thứ khác, bạn không còn cần Flexbox cho tác vụ này nữa và phần tử con không cần phải ở một phần tử riêng biệt (không giống như trong ví dụ trên). div được bao gồm. Điều đáng ngạc nhiên là sau nhiều thập kỷ phát triển, CSS giờ đây chỉ có một thuộc tính duy nhất để kiểm soát việc căn giữa theo chiều dọc.

Trở lại