căn giữa đối tượng theo chiều dọc trong CSS WDI Blog

7 cách căn giữa đối tượng theo chiều dọc trong CSS7 phút đọc

Giống như với kĩ thuật căn giữa đối tượng theo chiều ngang thì kĩ thuật căn giữa đối tượng theo chiều dọc trong CSS cũng là một kĩ thuật rất quan trọng và được sử dụng rộng rãi khi dàn trang website.

Việc căn giữa đối tượng theo chiều dọc trong CSS không hề đơn giản, một số trường hợp sẽ làm thay đổi chiều cao của đối tượng.Do đó khi sử dụng kĩ thuật này các bạn cần hết sức chú ý.

Dưới đây mình có tổng hợp tất cả 7 cách căn giữa đối tượng theo chiều dọc trong CSS hay gặp để các bạn tham khảo.

Sử dụng [line-height]

Cách căn giữa đối tượng theo chiều dọc được nhiều người biết đến nhất từ trước đến nay đó là cách sử dụng thuộc tính line-height.

Bí quyết của cách này đó là làm cho chiều cao của đối tượng bằng với chiều cao của khối chứa nó.

HTML

Tất cả ví dụ của bài viết này đều sẽ có chung một mẫu code HTML duy nhất để các bạn tiện so sánh.Cấu trúc code HTML rất đơn giản, bao gồm khối mẹ outer bao bọc khối con inner và bên trong khối con inner sẽ thêm một số dòng text như bạn thấy ở trên.

CSS

Về code CSS thì do căn giữa đối tượng theo chiều dọc nên mình cần chỉ định chiều cao của khối mẹ outer, ở đây mình lấy là 100px.Ngoài ra thêm một số thuộc tính border, color, background nữa để các bạn dễ hình dung sau khi xem kết quả.

Muốn thành phần bên trong khối con inner nằm giữa khối mẹ outer thì bạn cần tăng chiều cao của khối con inner bằng đúng với chiều cao của khối mẹ outer.Cụ thể ở đây là line-height: 100px;

Bạn chú ý là cách này sẽ làm thay đổi chiều cao của khối con bên trong nên khi sử dụng cần quan sát các yếu tố khác xem chúng có bị ảnh hưởng không.Nếu có thì hãy lựa chọn một trong các cách dưới đây.

Kết quả

căn giữa đối tượng theo chiều dọc trong CSS sử dụng line-height

Căn giữa đối tượng theo chiều dọc trong CSS sử dụng line-height

Code ứng dụng

Sử dụng [table-cell]

Cách thứ hai dùng để căn giữa đối tượng theo chiều dọc trong CSS là cách sử dụng thuộc tính table-cell.Đây là cách ít được sử dụng trong thực tế nhưng bạn cũng nên biết, nhỡ đâu sau này có cơ hội dùng tới nó.

Tương tự với cách sử dụng line-height ở trên thì cách này cũng sẽ làm thay đổi chiều cao của khối con bên trong nên bạn hết sức lưu ý khi sử dụng nó nhé.

CSS

Với cách này bạn cần khai báo thuộc tính display: table; cho khối mẹ outer.Sau đó bên trong khối con inner bạn thêm hai thuộc tính display: table-cell;vertical-align: middle; là sẽ có kết quả như ở ví dụ trên.

Kết quả

căn giữa đối tượng theo chiều dọc trong CSS sử dụng table-cell

Căn giữa đối tượng theo chiều dọc trong CSS sử dụng table-cell

Code ứng dụng

Sử dụng [position] và [transform]

Sử dụng positiontransform là cách dùng để căn giữa đối tượng theo chiều dọc trong CSS khá phổ biến trong thời gian gần đây.Cách này đơn giản, hiệu quả mà rất dễ tùy biến code khi cần.

Từ cách này trở về sau thì chiều cao của khối con bên trong sẽ không bị thay đổi nên bạn có thể thoải mái sử dụng mà không lo lắng sẽ gây ảnh hưởng đến các yếu tố khác.

CSS

Để sử dụng cách này bạn cần thiết lập thuộc tính position: relative; cho khối mẹ outer để làm mốc.Sau đó ở khối con inner bạn cần thêm bộ code sau vào là xong.

Kết quả

Căn giữa đối tượng theo chiều dọc trong CSS sử dụng position và transform

Căn giữa đối tượng theo chiều dọc trong CSS sử dụng position và transform

Code ứng dụng

Sử dụng Flexbox và [align-items]

Nếu bạn đang sử dụng Flexbox trong dự án thì bạn nên tham khảo cách căn giữa đối tượng theo chiều dọc trong CSS sử dụng Flexboxalign-items nhé.

Đây là cách rất hay và mình thường xuyên sử dụng cách này trong các dự án của công ty.

CSS

Với cách này bạn chỉ cần thay thêm hai hai dòng code là display:flex;align-items:center; vào bên trong CSS của khối mẹ outer là xong.Rất đơn giản phải không nào.

Kết quả

căn giữa đối tượng theo chiều dọc trong CSS sử dụng flexbox và align-items

Căn giữa đối tượng theo chiều dọc trong CSS sử dụng Flexbox và align-items

Code ứng dụng

Sử dụng Flexbox và [margin]

Khi sử dụng Flexbox, ngoài cách kết hợp với thuộc tính align-items như ở trên thì bạn cũng có thể kết hợp với thuộc tính margin để căn giữa đối tượng theo chiều dọc trong CSS.

CSS

Ở khối mẹ outer bạn thiết lập thuộc tính display:flex; và trong khối con inner bạn thêm hai thuộc tính là margin-top: auto; margin-bottom: auto;.

Kết quả thu được hoàn toàn giống với ví dụ trên.

Kết quả

căn giữa đối tượng theo chiều dọc trong CSS sử dụng flexbox và margin

Căn giữa đối tượng theo chiều dọc trong CSS sử dụng Flexbox và margin

Code ứng dụng

Sử dụng Grid và [align-items]

Ngoài cách sử dụng Flexbox thì còn có một cách khác khá tương tự để căn giữa đối tượng theo chiều dọc trong CSS đó là dùng Grid.

CSS

Nhìn vào code CSS ở ví dụ này chắc nhiều bạn thấy rất quen.Ở khối mẹ thay vì sử dụng thuộc tính display:flexbox; thì giờ chúng ta sử dụng thuộc tính display:grid; kết hợp với thuộc tính align-items: center;

Kết quả

căn giữa đối tượng theo chiều dọc trong CSS sử dụng grid và align-items

Căn giữa đối tượng theo chiều dọc trong CSS sử dụng Grid và align-items

Kết quả không khác gì 3 ví dụ ở trên.

Code ứng dụng

Sử dụng Grid và [margin]

Cách cuối cùng trong bài viết để căn giữa đối tượng theo chiều dọc trong CSS đó là sử dụng Grid kết hợp với thuộc tính margin.

CSS

Ở khối mẹ outer bạn hãy chỉ định thuộc tính display: grid; và bên trong khối con inner bạn hãy thêm hai thuộc tính margin-top: auto; margin-bottom: auto; là xong.

Kết quả

căn giữa đối tượng theo chiều dọc trong CSS sử dụng grid và margin

Căn giữa đối tượng theo chiều dọc trong CSS sử dụng Grid và margin

Kết quả tương tự như trên đây khi bạn áp dụng code mẫu ở trên.

Code ứng dụng 

Kết luận

Với 7 cách dùng để căn giữa đối tượng theo chiều dọc trong CSS mà mình giới thiệu trên đây hi vọng bạn sẽ nắm vững được kĩ thuật này và có thể tùy biến linh hoạt tùy theo tình hình của dự án bạn đang làm.

Trước bài viết này là bài viết hướng dẫn căn giữa đối tượng theo chiều ngang trong CSS và ngay sau bài này mình sẽ tiếp tục viết bài căn giữa đối tượng về trung tâm trong CSS.

Các bạn hãy theo dõi để nắm vững toàn bộ kĩ thuật căn chỉnh vị trí đối tượng trong CSS nhé.Hẹn gặp lại các bạn trong các bài viết sắp tới.

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x