Căn giữa thẻ div trong thẻ div

Với thiết kế web hiện đại, việc layout theo dạng tabless (dùng thẻ <div>) đã trở nên phổ biến và thường xuyên hơn là dạng table (dùng thẻ <table>) vì thẻ <div> được render nhanh hơn <table>. Chính vì vậy, sử dụng thuần thục <div> chính là một lợi thế rất lớn. Trong bài hướng dẫn này, mình sẽ giới thiệu với các bạn một cách vô cùng đơn giản để căn giữa thẻ div bên trong 1 thẻ div bằng 1 thuộc tính mới cúa CSS.

HTML

CSS

Mình khuyên các bạn nên sử dụng Firefox mới nhất để viết CSS, firefox sẽ hiển thị quá trình thay đổi khi bạn thay đổi thuộc tính CSS của thành phần html.

Đầu tiên, mình sẽ cho thẻ div cha căn giữa màn hình và chưa quan tâm tới div con.

Kết quả

Bây giờ mình sẽ cho thẻ div con màu xanh nằm chính giữa thẻ div cha màu đen bằng cách cho thuộc tính display của thẻ cha là flex, đồng thời thẻ con margin auto

Kết quả

Khá đơn giản phải không nào!

Chú ý

• Dòng 6 là định dạng thẻ cha hiển thị dạng flex.
• Dòng 13 là để thẻ con tự động canh giữa so với thẻ cha.

Tham khảo thuộc tính flex.

Về việc canh giữa thẻ div, chúng ta có rất nhiều cách, nhưng sử dụng flex là 1 thuộc tính hoàn toàn mới và code cũng vô cùng ngắn gọn. Mà càng ngắn gọn thì trang web chạy càng nhanh.

Hy vọng qua thủ thuật này, các bạn có thêm 1 lựa chọn cho mình để layout trang web như ý.