Bài viết hướng dẫn canh giữa trang web với CSS bằng 2 cách - margin và display: flex.
Canh giữa trang web với margin
Nguyên tắc của thuộc tính margin khi gán giá trị auto trái (margin-left: auto) hoặc phải (margin-right: auto) sẽ chiếm phần còn thừa của block chứa nó.
__________________________________________
|A |
| ______________ |
| |B | |
| |margin-left | |
| <---------------------> |auto | |
| |____________| |
|________________________________________|
__________________________________________
|A |
| ______________ |
| |B | |
| |margin-right| |
| |auto | <---------------------> |
| |____________| |
|________________________________________|Khi muốn 1 block nằm ở giữa 1 block khác, có thể sử dụng đặt tính này bằng cách sử dụng margin-left: auto và margin-right: auto đồng thời, điều này nghĩa là block ở bên trong sẽ chiếm "phần còn lại" để margin cho 2 bên, 2 phần này sẽ đều nhau, tạo nên hiệu ứng canh giữa cho 1 block trong 1 block khác.
.B {
margin-left: auto;
margin-right: auto;
}
__________________________________________
|A ____________ |
| |B | |
| <----------> | | <----------> |
| | | |
| |__________| |
|________________________________________|Canh giữa trang web với display: flex
Thuộc tính display: flex hỗ trợ nhiều phương pháp sắp xếp các phần tử bên trong nó, trong đó có thể sắp xếp giữa dù là block hay chuỗi theo chiều ngang lẫn chiều dọc.
Ở block chứa block cần canh giữa, có thể gán các thuộc tính với giá trị như bên dưới.
.A {
display: flex;
flex-direction: row;
justify-content: center;
}
__________________________________________
|A ____________ |
| |B | |
| <----------> | | <----------> |
| | | |
| |__________| |
|________________________________________|Nên sử dụng cách nào?
Đa phần các trang web sử dụng cách canh giữa bằng margin-left/margin-right auto. Do đó, các frontend developer có thể sử dụng cách này.
display: flex xuất hiện từ CSS3 và đến thời điểm hiện tại đã ổn định, do đó các developer có thể xem xét thay đổi qua cách làm mới này để có nhiều lựa chọn và hiện đại hơn.
Bài viết này được dịch từ phiên bản tiếng Anh How to Center a div in CSS với nội dung đầy đủ hơn.
