💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Căn giữa màn hình
📌
Kết luận
Căn giữa bằng Flexbox cần bộ ba justify-content + align-items + min-height
📝 Mã thực tế tại đây
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Tại sao cần min-height: 100vh?
align-items: center sẽ căn giữa dựa trên chiều cao của phần tử cha. Nếu thẻ body chỉ cao bằng nội dung bên trong, bạn sẽ không thấy nó nằm giữa theo chiều dọc màn hình. min-height: 100vh đảm bảo chiều cao của body luôn bằng ít nhất là toàn bộ màn hình.
Tổng kết
- Căn giữa theo chiều ngang:justify-content: center
- Căn giữa theo chiều dọc: align-items: center
- Để căn giữa toàn màn hình, bắt buộc phải có min-height: 100vh
Hãy thử trong phần bài tập
Hãy thử đưa phần tử vào chính giữa màn hình bằng Flexbox nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Sử dụng Flexbox để đưa thẻ div vào chính giữa màn hình (ngang và dọc).
Gợi ý khi gặp khó khăn
justify-content: center; align-items: center;