Tổng quan liêu ví dụ

Với những bạn mới học HTML, CSS cơ bản, vấn đề căn giữa 1 thẻ HTML có thể trở đề xuất khó khăn.Với vấn đề tự học cùng tham khảo, tôi đúc rút được vài bí quyết căn thân 1 thẻ HTML dễ dàng nhất, hiệu quả nhất.Ở đây, ta quy mong căn giữa là căn giữa cả theo chiều ngang với chiều dọc nhé.

Ta gồm một trang HTML đơn giản với cấu tạo sau:


Và phần CSS ban đầu:

body margin: 0;padding: 0;.parent background-color: #3a3845;width: 100vw;height: 100vh;.child background-color: #f7ccac;width: 200px;height: 200px; Thẻ phụ vương với class parent chiếm toàn thể trang webThẻ nhỏ với class child (màu hồng) đang nằm tại góc trên bên trái

*

Bây giờ, ta sẽ cùng căn giữa thẻ con nhé.

Sử dụng nằm trong tính position + transform

Code CSS có thêm một chút style:

.parent background-color: #3a3845;width: 100vw;height: 100vh; /* additional style */ position: relative;.child background-color: #f7ccac;width: 200px;height: 200px; /* additional style */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);Thẻ thân phụ ta bao gồm thuộc tính position: relative, thẻ bé ta tất cả thuộc tính position: absolute cùng với left, right, transform như trên, ta đạt được:

*

Sử dụng Flexbox

Code CSS chỉ chuyển đổi ở thẻ cha:

.parent background-color: #3a3845;width: 100vw;height: 100vh; /* additional style */ display: flex; justify-content: center; align-items: center;.child background-color: #f7ccac;width: 200px;height: 200px;display: flex đổi thay thẻ cha thành Flex container, justify-content: center căn giữa những thẻ bé theo chiều ngang, align-items: center căn giữa các thẻ bé theo chiều dọc:

*

Flexbox còn nhiều thuộc tính và định nghĩa nữa, tuy nhiên trong ví dụ như này bạn chỉ từ 3 chiếc code là đạt được hiệu quả nha