Center an element
Trong công thức này, bạn sẽ thấy cách căn giữa một hộp bên trong một hộp khác bằng cách sử dụng flexbox và grid, căn giữa nội dung theo cả chiều ngang lẫn chiều dọc.
Yêu cầu
Đặt một mục vào trung tâm của một hộp khác theo cả chiều ngang lẫn chiều dọc.
Công thức
Nhấp vào "Play" trong các khối code bên dưới để chỉnh sửa ví dụ trong MDN Playground:
<div class="container">
<div class="item">I am centered!</div>
</div>
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
Sử dụng flexbox
Để căn giữa một hộp bên trong một hộp khác, trước tiên hãy chuyển hộp chứa thành flex container bằng cách đặt thuộc tính display thành flex. Sau đó đặt align-items thành center để căn giữa theo chiều dọc (trên trục block) và justify-content thành center để căn giữa theo chiều ngang (trên trục inline). Và đó là tất cả những gì cần thiết để căn giữa một hộp bên trong hộp khác!
HTML
<div class="container">
<div class="item">I am centered!</div>
</div>
CSS
div {
border: solid 3px;
padding: 1em;
max-width: 75%;
}
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
height: 8em;
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
Chúng ta đặt chiều cao cho container để minh họa rằng mục bên trong thực sự được căn giữa theo chiều dọc trong container.
Kết quả
Thay vì áp dụng align-items: center; trên container, bạn cũng có thể căn giữa theo chiều dọc cho mục bên trong bằng cách đặt align-self thành center trên chính mục bên trong đó.
Sử dụng grid
Một phương pháp khác bạn có thể dùng để căn giữa một hộp bên trong hộp khác là trước tiên biến hộp chứa thành grid container và sau đó đặt thuộc tính place-items thành center để căn giữa các mục theo cả trục block lẫn inline.
HTML
<div class="container">
<div class="item">I am centered!</div>
</div>
CSS
div {
border: solid 3px;
padding: 1em;
max-width: 75%;
}
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
height: 8em;
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
display: grid;
place-items: center;
}
Kết quả
Thay vì áp dụng place-items: center; trên container, bạn có thể đạt được cùng kết quả căn giữa bằng cách đặt place-content: center; trên container hoặc bằng cách áp dụng place-self: center hoặc margin: auto; trên chính mục bên trong đó.