Khi xây dựng và thiết kế giao diện Web, vấn đề mà nhiều lập trình viên thường gặp là làm cách nào để canh giữa một đoạn văn bản, hình ảnh,… ở một vùng giao diện nào đó. Việc này trông có vẻ đơn giản, tuy nhiên trên thực tế lại có nhiều trường hợp khá phức tạp, vì vậy bài viết này sẽ liệt kê một số các cách đơn giản mà hiệu quả giúp bạn canh giữa phần tử HTML bằng CSS.
Canh giữa theo chiều ngang
Canh giữa nội dung trang web hoặc các phần tử block
Nếu bạn không dùng Bootstrap hay bất kỳ framework nào để xây dựng giao diện thì việc canh giữa toàn bộ bố cục trang theo kích thước trình duyệt không hề dễ. Cách tốt nhất là bạn dùng thuộc tính margin với kích thước 0 auto ở thẻ body hoặc phần tử div bao hết giao diện web và quan trọng phải đặt kích thước width cho vùng div bao này.
Sau đây là ví dụ một giao diện trang web có kích thước vùng div tên là “wrap” là 1000px được canh giữa.
Căn giữa bố cục --- DAMMIO.COM
body
{
margin: 0 auto; /* chỉnh lề giao diện tự động */
}
.wrap
{
margin: 0 auto; /* chỉnh lề giao diện tự động */
width: 1000px; /* phải đặt kích thước giao diện cho trang */
background-color:lightblue;
}
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Cách này bạn cũng có thể sử dụng để canh giữa một phần tử block [div, p, h1->h6, ul, li,…]. Để canh giữa bạn chỉ cần thêm thuộc tính CSS margin:0 auto; là được. Lưu ý một số trường hợp cần có độ rộng width thì nội dung mới có thể canh giữa.
Nội dung canh giữa --- DAMMIO.COM
.noidung { margin: 0 auto; }
Nội dung cần canh giữa
Canh giữa văn bản bất kỳ
Nếu bạn chỉ muốn văn bản hiển thị ở giữa vùng văn bản nào đó, bạn có thể dùng thuộc tính text-align:center trong CSS. Chẳng hạn, ví dụ sau canh giữa dòng đầu tiên nằm trong lớp .noidung sau đây.
Căn giữa bố cục --- DAMMIO.COM
body
{
margin: 0 auto; /* chỉnh lề giao diện tự động */
}
.wrap
{
margin: 0 auto; /* chỉnh lề giao diện tự động */
width: 1000px; /* phải đặt kích thước giao diện cho trang */
background-color:lightblue;
}
.content
{
text-align:center;
}
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Canh giữa dùng Flexbox
Bạn cũng có thể dùng FlexBox, một module bố cục giao diện cho phép bạn thiết kế cách cấu trúc bố cục web mà không cần phải dùng thuộc tính float hay position. Khi đó bạn chỉ cần thêm 2 thuộc tính display: flex; và justify-content: center; trong CSS.
Căn giữa bố cục --- DAMMIO.COM
body
{
display: flex;
justify-content: center;
}
.wrap
{
display: flex;
justify-content: center;
background-color:yellow;
width:1000px;
}
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Canh giữa theo chiều dọc
Dùng thuộc position, top và transform
Bạn có 1 vùng div và bạn muốn nội dung canh giữa theo chiều dọc chứ không phải chiều ngang. Vậy cách làm thế nào? Bạn 2 dùng 2 vùng div, vùng 1 đặt vị trí position: relative;, còn vùng 2 chứa một số phong cách CSS như ví dụ sau. Cách này cho phép bạn canh giữa bất kỳ trường hợp nào mà không cần biết chiều cao của vùng bao.
Căn giữa bố cục --- DAMMIO.COM
body
{
margin: 0 auto;
}
.wrap
{
margin: 0 auto;
width:1000px;
height:300px;
background-color:yellow;
position: relative;
}
.noidung
{
position: absolute;
top: 50%;
transform: translateY[-50%]; // dịch vị trí về 50%
}
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Chuyển về dạng bảng table, cell
Ngoài cách căn giữa theo chiều dọc ở trên, bạn cũng có thể canh giữa bằng cách chuyển hóa các vùng về dạng table và table-cell như sau. Kết quả cũng tương tự như ở trên.
Căn giữa bố cục --- DAMMIO.COM
body
{
margin: 0 auto;
}
.wrap
{
margin: 0 auto;
width:1000px;
height:300px;
background-color:yellow;
display: table;
}
.noidung
{
display: table-cell;
vertical-align: middle;
}
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Canh giữa theo chiều ngang, chiều dọc
Bạn có thể kết hợp các cách ở trên để có thể canh giữa theo chiều ngang lẫn chiều dọc.
Dùng Flexbox
Bạn có thể dùng các thuộc tính Flexbox để canh giữa nội dung như sau. Có lẽ đây là cách đơn giản và gọn nhất.
Căn giữa bố cục --- DAMMIO.COM
body
{
margin: 0 auto;
}
.wrap
{
margin: 0 auto;
width:1000px;
height:300px;
background-color:yellow;
display: flex; /* Canh giữa bằng flex */
justify-content: center;
align-items: center;
}
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Dùng position. top, left và transform
Nếu không thích dùng Flexbox, bạn có thể dùng 1 số thuộc tính thông thường kết hợp với thuộc tính transform để dịch nội dung đến vùng bạn muốn hiển thị ở giữa. Kết quả cũng tương tự như trên.
Căn giữa bố cục --- DAMMIO.COM
body
{
margin: 0 auto;
}
.wrap
{
margin: 0 auto;
width:1000px;
height:300px;
background-color:yellow;
position: relative; /* Canh giữa */
}
.noidung
{
position: absolute; /* Canh giữa */
top: 50%;
left: 50%;
transform: translate[-50%, -50%];
}
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Nội dung trang web ở đây --- dammio.com
Ngoài ra còn 1 số cách khác nữa để canh giữa nội dung, phần tử trong HTML thông qua các thuộc tính CSS. Tuy nhiên, với chừng này phương pháp trong bài cũng đủ để bạn áp dụng để thiết kế giao diện cho website. Chúng tôi chúc bạn thành công!