Thẻ Căn Giữa Trong Html

      6

Tổng quan ví dụ

Với những các bạn mới học HTML, CSS cơ bản, việc căn giữa 1 thẻ HTML hoàn toàn có thể trở bắt buộc khó khăn.Với việc tự học cùng tham khảo, tôi đúc rút được vài giải pháp căn thân 1 thẻ HTML dễ nhất, tác dụng nhất.Ở đây, ta quy ước căn giữa là căn giữa cả theo chiều ngang với chiều dọc nhé.

Ta bao gồm một trang HTML đơn giản với kết cấu 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 cục trang webThẻ con 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 thuộc tính position + transform

Code CSS tất cả thêm một chút í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ẻ phụ thân ta có thuộc tính position: relative, thẻ con ta gồm thuộc tính position: absolute cùng rất left, right, transform như trên, ta đạt được:

*

Sử dụng Flexbox

Code CSS chỉ đổi khác ở 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 biến thẻ phụ vương thành Flex container, justify-content: center căn giữa các thẻ bé theo chiều ngang, align-items: center căn giữa các thẻ con theo chiều dọc:

*

Flexbox còn nhiều thuộc tính và có mang nữa, nhưng trong lấy một ví dụ này bạn chỉ với 3 chiếc code là đã đạt được tác dụng nha

hotlive |

Hi88