Căn giữa các thẻ <div> là một kỹ thuật quan trọng trong thiết kế web, giúp tạo ra một bố cục hài hòa và dễ nhìn cho người dùng. Có nhiều cách để căn giữa một thẻ <div> trong một thẻ <div> khác, và trong bài viết này, chúng ta sẽ tìm hiểu chi tiết các phương pháp phổ biến.
<div> Bằng FlexboxFlexbox là một trong những phương pháp hiện đại và phổ biến để căn giữa các phần tử. Bạn có thể dễ dàng căn giữa cả chiều ngang và chiều dọc bằng cách sử dụng thuộc tính display: flex.
<div class="container">
<div class="centered">
Nội dung căn giữa
</div>
</div>.container {
display: flex;
justify-content: center; /* Căn giữa theo chiều ngang */
align-items: center; /* Căn giữa theo chiều dọc */
height: 200px; /* Chiều cao của container */
border: 1px solid #000; /* Đường viền để dễ dàng nhìn thấy */
}
.centered {
background-color: #f0f0f0; /* Màu nền của thẻ div căn giữa */
padding: 20px; /* Khoảng cách bên trong */
}<div> Bằng GridCSS Grid cũng là một phương pháp tuyệt vời để căn giữa các phần tử, cho phép bạn kiểm soát hoàn toàn vị trí của chúng trong lưới.
<div class="grid-container">
<div class="centered">
Nội dung căn giữa
</div>
</div>.grid-container {
display: grid;
place-items: center; /* Căn giữa theo cả chiều ngang và chiều dọc */
height: 200px; /* Chiều cao của container */
border: 1px solid #000; /* Đường viền để dễ dàng nhìn thấy */
}
.centered {
background-color: #f0f0f0; /* Màu nền của thẻ div căn giữa */
padding: 20px; /* Khoảng cách bên trong */
}<div> Bằng PositionPhương pháp sử dụng thuộc tính position cho phép bạn căn giữa phần tử một cách linh hoạt, nhưng có thể cần thêm một chút mã để đạt được hiệu quả mong muốn.
<div class="position-container">
<div class="centered">
Nội dung căn giữa
</div>
</div>.position-container {
position: relative; /* Thiết lập vị trí tương đối cho container */
height: 200px; /* Chiều cao của container */
border: 1px solid #000; /* Đường viền để dễ dàng nhìn thấy */
}
.centered {
position: absolute; /* Thiết lập vị trí tuyệt đối cho thẻ div căn giữa */
top: 50%; /* Di chuyển từ trên xuống giữa */
left: 50%; /* Di chuyển từ trái sang giữa */
transform: translate(-50%, -50%); /* Đưa thẻ div căn giữa */
background-color: #f0f0f0; /* Màu nền của thẻ div căn giữa */
padding: 20px; /* Khoảng cách bên trong */
}<div> Bằng Margin Tự ĐộngNếu bạn chỉ cần căn giữa theo chiều ngang, bạn có thể sử dụng margin tự động với điều kiện thẻ <div> cần được chỉ định kích thước cụ thể.
<div class="margin-container">
<div class="centered">
Nội dung căn giữa
</div>
</div>.margin-container {
height: 200px; /* Chiều cao của container */
border: 1px solid #000; /* Đường viền để dễ dàng nhìn thấy */
}
.centered {
width: 50%; /* Đặt chiều rộng cho thẻ div căn giữa */
margin: 0 auto; /* Căn giữa theo chiều ngang */
background-color: #f0f0f0; /* Màu nền của thẻ div căn giữa */
padding: 20px; /* Khoảng cách bên trong */
}Có nhiều phương pháp để căn giữa thẻ <div> trong một thẻ <div> khác trong CSS. Tùy thuộc vào yêu cầu cụ thể và bố cục của trang web, bạn có thể chọn phương pháp phù hợp nhất cho mình. Flexbox và Grid là những cách hiện đại và linh hoạt nhất, trong khi phương pháp sử dụng position và margin tự động cũng rất hữu ích trong nhiều tình huống.
