căn đối tượng về trung tâm trong css WDI Blog

6 cách căn đối tượng về trung tâm trong CSS6 phút đọc

Kết hợp hai bài viết trước là căn giữa đối tượng theo chiều dọc và ngang trong CSS chúng ta có rất nhiều cách để căn đối tượng về trung tâm trong CSS.

Căn đối tượng về trung tâm trong CSS là một kĩ thuật cực kì quan trọng mà bất kì web developer nào cũng cần phải hiểu rõ để vận dụng trong các dự án thực tế.

Và trong bài viết ngày hôm nay mình sẽ giới thiệu đến các bạn 6 cách dùng để căn đối tượng về trung tâm trong CSS.

Sử dụng [table-cell]

Cách đầu tiên dùng để căn đối tượng về trung tâm trong CSS đó là sử dụng thuộc tính table-cell.Cách này chắc nhiều bạn lần đầu thấy và cũng chưa áp dụng trong thực tế bao giờ.

Bản thân mình cũng biết đến phương pháp này trong thời gian gần đây khi hầu hết các cách dưới đây không thể áp dụng được.

HTML

Cũng như những bài trước thì các ví dụ trong bài này cũng đều có chung một mẫu code HTML duy nhất.Mẫu code này khá đơn giản và hoàn toàn tương tự như hai bài viết trước đó nên mình không giải thích thêm ở đây.

CSS

Căn đối tượng về trung tâm nghĩa là sẽ tác động tới chiều dọc nên mình đã thêm chiều cao cho khối mẹ outer100px để khi thực hành bạn sẽ dễ dàng hình dung được kết quả.

Để căn đối tượng về trung tâm bạn cần thêm hai thuộc tính là display: table;width: 100%; vào bên trong CSS của khối mẹ outer.

Sau đó ở CSS của khối con inner bạn thêm bộ ba thuộc tính như dưới đây là ok.

Kết quả

Căn đối tượng về trung tâm trong CSS sử dụng table-cell

Căn đối tượng về trung tâm trong CSS sử dụng table-cell

Code ứng dụng

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

Cách tiếp theo để căn đối tượng về trung tâm trong CSS đó là sử dụng hai thuộc tính positiontransform.

CSS

Ở cách này điều kiện cần là thêm thuộc tính position: relative; vào trong CSS của khối mẹ outer và thêm bộ code sau vào bên trong thuộc tính của khối con inner.

Kết quả

Căn đối tượng về trung tâm trong CSS sử dụng table-cell

Căn đối tượng về trung tâm trong CSS sử dụng table-cell

Code ứng dụng

Sử dụng Flexbox

Sử dụng Flexbox để căn đối tượng về trung tâm trong CSS là cách tối ưu nhất ở thời điểm hiện tại theo quan điểm của mình.

CSS

Với cách này bạn chỉ cần thêm bộ code dưới đây vào bên trong khối mẹ outer là xong.

Kết quả

Căn đối tượng về trung tâm trong CSS sử dụng Flexbox

Căn đối tượng về trung tâm trong CSS sử dụng Flexbox

Code ứng dụng

Sử dụng Flexbox và [margin]

Kết hợp Flexbox với thuộc tính margin bạn cũng có thể căn đối tượng về trung tâm rất dễ dàng.

CSS

Bạn cần thêm thuộc tính display: flex; cho CSS của khối mẹ outer, sau đó ở CSS của khối con inner bạn thêm thuộc tính margin: auto; là ok.

Kết quả

Căn đối tượng về trung tâm trong CSS sử dụng Flexbox và margin

Căn đối tượng về trung tâm trong CSS sử dụng Flexbox và margin

Code ứng dụng

Sử dụng Grid

Bên cạnh cách sử dụng Flexbox bạn có thể sử dụng Grid để căn đối tượng về trung tâm trong CSS.

CSS

Code trong cách sử dụng Grid này gần giống với code trong phần sử dụng Flexbox.Ở CSS của khối mẹ outer thay vì thuộc tính display: flex; bạn hãy khai báo thuộc tính display: grid;

Thêm vào hai thuộc tính justify-content: center;align-items: center; nữa là hoàn thành.

Kết quả 

Căn đối tượng về trung tâm trong CSS sử dụng Grid

Căn đối tượng về trung tâm trong CSS sử dụng Grid

Code ứng dụng

Sử dụng Grid và [margin]

Kết hợp Grid và thuộc tính margin là cách căn đối tượng về trung tâm trong CSS cuối cùng mà mình muốn giới thiệu đến các bạn trong bài viết này.

CSS

Trong CSS của khối mẹ outer bạn hãy thêm thuộc tính display: grid; và tiếp theo trong CSS của khối con inner bạn hãy thêm thuộc tính margin: auto; để có được kết quả như ý.

Kết quả

Căn đối tượng về trung tâm trong CSS sử dụng Grid và margin

Căn đối tượng về trung tâm trong CSS sử dụng Grid và margin

Code ứng dụng

Kết luận

Nếu đã đọc hai bài viết trước của mình về hướng dẫn căn giữa đối tượng theo chiều ngang và dọc thì có lẽ đến bài viết này bạn sẽ thấy kiến thức mình chia sẻ rất đơn giản.

Cả ba bài viết đều quan trọng và những kiến thức trong cả ba bài này đều thường xuyên phải sử dụng nếu bạn làm việc liên quan đến CSS.Do đó nếu chưa hiểu kĩ bạn hãy copy code về tự thực hành và thay đổi code để hiểu rõ hơn.

Nếu vẫn chưa hiểu hay có ý kiến đóng góp thì bạn đừng ngần ngại hãy gửi ngay cho mình một tin nhắn qua biểu mẫu liên hệ mà mình có để link ở chân trang web này.

Mong bạn sẽ ủng hộ blog nhiều hơn nữa trong tương lai.Chúc bạn luôn thành công và hạnh phúc.

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