Một số cách căn giữa phần tử theo chiều dọc trong CSS

Xin chào các bạn, với Front-end thì việc căn phần tử theo trái/phải/trên/dưới là chuyện như cơm bữa. Việc căn phần tử theo chiều ngang thì có vẻ suôn sẻ, vậy còn theo chiều dọc thì sao ? liệu bạn đã trang bị cho mình đầy đủ giáp gai để ứng phó với mọi tình huống éo le trong thực tế chưa, hãy cùng mình điểm qua một vài kỹ thuật "Căn giữa phần tử theo chiều dọc trong CSS" qua bài viết này nhé

1. Sử dụng thuộc tính vertical-align

vertical-align: middle; sinh ra là để tập trung các phần tử theo chiều dọc, kết hợp với display: table-cell; như ví dụ trên, ta có thể làm cho phần tử cách đều trên/dưới

2. Sử dụng flexbox kết hợp với margin

Khi sử dụng flexbox, các flex-item có margin: auto; luôn rất ảo diệu, việc gán giá trị margin-top/bottom: auto; giúp đẩy phần tử vào giữa flex-container theo chiều dọc (tương tự với chiều ngang)

3. Sử dụng flexbox với align-items

align-items chúng ta thường dùng để căn chỉnh các phần tử với nhau, nhưng khi trong flex-container chỉ chứa 1 flex-item thì nó lại giúp ta căn giữa theo chiều dọc rất mượt mà

4. Sử dụng display:table

Ví dụ này khá giống ví dụ 1, chỉ khác ta sẽ "lồng phần tử table-cell vào phần tử table để nó hiển thị như 1 table"

5. Sử dụng line-height

height bao nhiêu cho line-height bấy nhiêu cũng là một giải pháp không tồi

6. Sử dụng padding

padding-top = padding-bottom cũng giúp ta căn đều phần tử theo chiều dọc

7. Sử dụng position: absolute kết hợp với margin âm

Theo ví dụ bạn chỉ cần set up đủ bộ combo position, top, left các kiểu và sử dụng margin âm = 1/2 height của phần tử sẽ giúp phần tử ở giữa cha củ nó

8. Sử dụng position: absolute kết hợp với transform

Cách này có vẻ xịn xò hơn cách 7 vì: CSS3 hỗ trợ hàm translate() tính toán theo kích thước nội tại của element, còn left/top để tính toán vị trí theo kích thước của parent, nên ta có dịch chuyển cho tâm của parent và child trùng với nhau, nhờ đó căn giữa được đối tượng theo cả 2 chiều ngang/dọc.

9. Sử dụng float

Bản thân mình rất ít khi dùng float vì phải clear rất mất công tuy nhiên đây cũng là một phương án được dùng để căn giữa phần tử theo chiều dọc

Kết luận

Trên đây mình đã giới thiệu tới các bạn một số cách căn giữa phần tử theo chiều dọc thường được sử dụng, chắc chắn sẽ còn nhiều cách hay ho hơn hi vọng sẽ đến từ khung bình luận.

Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công !

// Tham khảo: https://www.w3docs.com/snippets/css/how-to-vertically-center-text-with-css.html