Căn giữa hoàn hảo

Trong CSS, việc đạt được “vị trí chính giữa hoàn hảo”, tức là căn giữa một phần tử theo cả chiều ngang lẫn chiều dọc bên trong phần tử cha, là một thử thách bố cục phổ biến. Flexbox cung cấp giải pháp đơn giản và tinh tế cho vấn đề này. Bằng cách kết hợp thuộc tính justify-content và align-items, bạn có thể dễ dàng căn giữa phần tử con bên trong vùng chứa flex, bất kể kích thước của phần tử con hay phần tử cha. 

Đây là cách căn giữa hoàn hảo bằng Flexbox:

.container {
    display: flex; /* Biến phần tử cha thành vùng chứa flex */
    justify-content: center; /* Căn giữa phần tử con theo chiều ngang trên trục chính */
    align-items: center; /* Căn giữa phần tử con theo chiều dọc trên trục phụ */
}

Để kỹ thuật này hoạt động hiệu quả, hãy đảm bảo vùng chứa flex có chiều cao xác định. Nếu bạn không đặt chiều cao rõ ràng cho vùng chứa, chiều cao của nó chỉ vừa bằng nội dung bên trong, nên bạn có thể không thấy nội dung được căn giữa theo chiều dọc.

Đây là ví dụ về cách dùng kỹ thuật này trong HTML:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Đặt chiều cao cụ thể cho vùng chứa */
    border: 1px solid black; /* Tùy chọn: Thêm đường viền để dễ quan sát */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

Trong ví dụ này, phần tử (element) .container có chiều cao là 300px, còn phần tử .child sẽ nằm chính giữa theo cả chiều ngang lẫn chiều dọc bên trong nó.