How to center an item
Trong hướng dẫn này, bạn có thể tìm hiểu cách căn giữa một phần tử bên trong một phần tử khác, cả theo chiều ngang lẫn chiều dọc.
Căn giữa một box
Để căn giữa một box bên trong một box khác bằng CSS, bạn sẽ cần sử dụng các thuộc tính CSS box alignment trên phần tử cha. Vì các thuộc tính căn chỉnh này chưa có hỗ trợ trình duyệt cho layout block và inline, bạn sẽ cần biến phần tử cha thành container flex hoặc grid để bật khả năng sử dụng tính năng căn chỉnh.
Trong ví dụ dưới đây, chúng ta đã đặt display: flex cho container cha; sau đó đặt justify-content thành center để căn chỉnh theo chiều ngang, và align-items thành center để căn chỉnh theo chiều dọc.
<div class="wrapper">
<div class="box">center me!</div>
</div>
.wrapper {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: rgb(69 164 181);
border-radius: 5px;
padding: 10px;
color: white;
}
Note:
Bạn có thể sử dụng kỹ thuật này để thực hiện bất kỳ loại căn chỉnh nào cho một hoặc nhiều phần tử bên trong một phần tử khác. Trong ví dụ trên, bạn có thể thử thay đổi các giá trị thành bất kỳ giá trị hợp lệ nào cho justify-content và align-items.