Trong quá trình thiết kế web, căn giữa CSS luôn là một trong những thao tác quan trọng giúp giao diện trở nên trực quan và thẩm mỹ hơn. Tuy nhiên, không phải ai cũng nắm rõ các cách căn giữa khác nhau cho văn bản, hình ảnh hay khối phần tử. Bài viết này LANIT sẽ hướng dẫn bạn chi tiết các phương pháp căn giữa bằng CSS, từ cơ bản đến nâng cao, đảm bảo dễ áp dụng và tối ưu cho mọi dự án web.
Tại sao cần căn giữa CSS trên website?
Trong thiết kế website, căn giữa CSS không chỉ là thao tác căn chỉnh hình ảnh hoặc văn bản đơn giản mà còn là yếu tố then chốt để quyết định trải nghiệm người dùng và cảm nhận thẩm mỹ tổng thể. Một website đẹp, chuyên nghiệp thường đến từ những chi tiết nhỏ như cách bố trí, khoảng cách và sự cân bằng thị giác.
- Giao diện cân đối, dễ nhìn: Khi nội dung, hình ảnh hay nút bấm được căn giữa, bố cục sẽ trở nên gọn gàng và hài hoà hơn. Người dùng sẽ thấy website chuyên nghiệp, không bị rối mắt.
- Thu hút sự chú ý đúng chỗ: Khu vực trung tâm màn hình luôn là điểm dễ gây chú ý nhất. Nếu bạn đặt logo, tiêu đề hoặc nút CTA ở giữa, người dùng sẽ dễ nhìn thấy và nhấp vào hơn.
- Đảm bảo hiển thị đẹp trên mọi thiết bị: Ngày nay, người dùng sử dụng rất nhiều thiết bị để truy cập website. Căn giữa bằng CSS giúp nội dung tự động cân đối trên các màn hình khác nhau mà không bị lệch hoặc vỡ giao diện.
- Dễ đọc và tiếp nhận thông tin: Một số nội dung ngắn gọn như tiêu đề, câu slogan hoặc trích dẫn đặt ở giữa sẽ nổi bật và dễ đọc hơn, khiến người dùng nhớ lâu hơn.
- Tạo ấn tượng chuyên nghiệp: Website có bố cục được căn chỉnh hợp lý cho thấy sự đầu tư, chỉn chu của thương hiệu. Đây là yếu tố nhỏ nhưng lại góp phần tạo lòng tin cho khách hàng.
5 cách căn giữa CSS theo chiều ngang
Trong thiết kế web, việc căn giữa theo chiều ngang là thao tác thường xuyên gặp phải, đặc biệt khi bạn muốn bố trí tiêu đề, hình ảnh hoặc các khối nội dung nổi bật.
Căn giữa CSS bằng cách sử dụng text-align: center
Đây là cách đơn giản nhất để căn giữa nội dung văn bản hoặc inline elements (ví dụ: span, img) trong một thẻ bao (container).
.container {
text-align: center;
}Dùng margin: auto
Với các phần tử block có độ rộng cố định, bạn có thể căn giữa bằng cách cho margin trái/phải tự động.
.box {
width: 300px;
margin: 0 auto;
}Căn giữa CSS bằng Flexbox
Flexbox hỗ trợ căn chỉnh linh hoạt hơn, đặc biệt trong bố cục responsive.
.container {
display: flex;
justify-content: center;
}
Dùng CSS Grid để căn giữa
CSS Grid cũng có khả năng căn giữa rất mạnh mẽ, đặc biệt khi làm layout phức tạp.
.container {
display: grid;
justify-content: center;
}Dùng position kết hợp transform
Cách này thường dùng khi muốn căn giữa phần tử tuyệt đối trong một khối cha.
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}3 cách căn giữa CSS theo chiều dọc
Việc căn giữa theo chiều ngang khá đơn giản, tuỳ nhiên với việc căn giữa CSS theo chiều dọc lại tương đối phức tạp, đặc biệt khi làm việc với các khối phần tử có kích thước khác nhau.
Sử dụng Flexbox
Flexbox là phương pháp hiện đại và được khuyến khích sử dụng nhiều nhất để căn giữa phần tử theo chiều dọc.
.container {
display: flex;
align-items: center; /* Căn giữa dọc */
height: 300px; /* Container cần có chiều cao */
border: 1px solid #ccc;
}Dùng CSS Grid
CSS Grid cung cấp khả năng căn chỉnh mạnh mẽ, đặc biệt khi bạn muốn quản lý nhiều phần tử trong layout.
.container {
display: grid;
align-items: center; /* Căn giữa theo chiều dọc */
height: 300px;
border: 1px solid #ccc;
}
Dùng position kết hợp transform
.parent {
position: relative;
height: 300px;
border: 1px solid #ccc;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}4 cách căn giữa CSS theo hai chiều
Trong nhiều trường hợp, bạn không chỉ cần căn giữa theo ngang hoặc dọc, mà muốn đặt phần tử chính xác ngay giữa khung chứa. Đây là một yêu cầu rất phổ biến khi thiết kế website (ví dụ căn giữa logo, popup, modal, form đăng ký)
Flexbox
Flexbox là phương pháp nhanh và linh hoạt nhất để căn giữa theo cả hai chiều.
.container {
display: flex;
justify-content: center; /* Căn ngang */
align-items: center; /* Căn dọc */
height: 300px;
border: 1px solid #ccc;
}CSS Grid
CSS Grid mang lại khả năng căn chỉnh mạnh mẽ, đặc biệt khi cần xử lý bố cục nhiều cột, nhiều hàng.
.container {
display: grid;
place-items: center; /* Căn giữa cả ngang và dọc */
height: 300px;
border: 1px solid #ccc;
}Position + Transform
Phương pháp truyền thống nhưng vẫn được dùng nhiều, nhất là khi muốn căn giữa phần tử tuyệt đối.
.parent {
position: relative;
height: 300px;
border: 1px solid #ccc;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Dùng table-cell
Đây là cách phổ biến trước khi Flexbox và Grid ra đời.
.container {
display: table-cell;
vertical-align: middle; /* Căn dọc */
text-align: center; /* Căn ngang */
height: 300px;
width: 300px;
border: 1px solid #ccc;
}Căn giữa bằng CSS tưởng chừng đơn giản nhưng lại là kỹ thuật quan trọng giúp website trở nên cân đối, chuyên nghiệp và thu hút người dùng hơn. Tùy từng trường hợp bạn có thể linh hoạt áp dụng các phương pháp khác nhau như text-align, margin: auto, Flexbox, Grid hay position + transform.
