Căn giữa CSS là một trong những kỹ thuật cơ bản nhưng không kém phần quan trọng của một người thiết kế, lập trình website. Vì vậy hiểu rõ các cách căn giữa có thể giúp người thiết kế web dễ dàng tạo ra các giao diện web đẹp mắt, chuyên nghiệp. Bài viết sau đây sẽ tổng hợp các phương pháp căn giữa CSS theo chiều ngang, chiều dọc và cả hai chiều.
Vai trò của căn giữa CSS trong thiết kế web
Căn giữa CSS là kỹ thuật điều chỉnh vị trí của các phần tử trên website sao cho chúng nằm ở vị trí trung tâm của màn hình hoặc phần tử chứa chúng.
![Tổng hợp cách căn giữa CSS theo chiều ngang, dọc, hai chiều 8 Căn giữa CSS là kỹ thuật điều chỉnh vị trí của các phần tử trên trang web](https://static-xf1.vietnix.vn/wp-content/uploads/2024/07/Can-giua-CSS-la-gi.jpg)
Việc căn giữa mang lại nhiều lợi ích quan trọng cho thiết kế website, cụ thể:
- Tạo bố cục hài hòa, cân đối: Căn giữa giúp phân bổ không gian đều đặn, tạo sự thống nhất và chuyên nghiệp cho website. Điều này đặc biệt hữu ích khi trình bày nhiều nội dung khác nhau hoặc tạo điểm nhấn cho các yếu tố quan trọng như tiêu đề, logo, hình ảnh.
- Nâng cao trải nghiệm người dùng: Bố cục cân đối, dễ nhìn giúp thu hút người dùng và hỗ trợ họ tiếp cận thông tin một cách dễ dàng.
- Tăng khả năng thích ứng: Căn giữa CSS có thể được áp dụng linh hoạt trên nhiều thiết bị khác nhau, từ máy tính để bàn, laptop đến điện thoại di động, đảm bảo giao diện website luôn hiển thị tốt.
Mọi người cũng xem:
5 cách căn giữa CSS theo chiều ngang
Căn giữa chiều ngang CSS là cách phân bổ đều các phần tử HTML sang hai bên của trang web. Dưới đây là một số kỹ thuật phổ biến được sử dụng:
1. Dùng text-align:center
Thuộc tính text-align: center
trong CSS dùng để căn giữa văn bản hoặc phần tử con theo chiều ngang bên trong một phần tử khác. Phạm vi áp dụng gồm:
- Phần tử block: Các phần tử khối như
<div>
,<p>
,<h1>
–<h6>
, … khi được áp dụngtext-align: center
sẽ căn giữa nội dung bên trong chúng (bao gồm văn bản, hình ảnh và các phần tử khác) theo chiều ngang. - Phần tử văn bản:
Text-align: center
sẽ căn giữa nội dung văn bản theo chiều ngang. - Phần tử nội dung (Inline element): Mặc dù không trực tiếp căn giữa các phần tử inline như
<span>
hay<a>
, nhưng nếu chúng nằm bên trong một phần tử block đã áp dụngtext-align: center
, nội dung của chúng cũng sẽ được căn giữa theo chiều ngang. - Table và inline-block elements: Các phần tử
<table>
và phần tử códisplay: inline-block
cũng hoạt động tương tự phần tử block, sẽ được căn giữa theo chiều ngang khi áp dụngtext-align: center
.
![Tổng hợp cách căn giữa CSS theo chiều ngang, dọc, hai chiều 11 Thuộc tính text-align: center trong CSS dùng để căn giữa văn bản](https://static-xf1.vietnix.vn/wp-content/uploads/2024/07/Dung-text-align-center.webp)
2. Dùng margin: 0 auto;
Margin là thuộc tính xác định khoảng cách giữa các phần tử hoặc viền của phần tử với các phần tử kế cận hay với biên của viewport (khung nhìn trình duyệt). Bạn có thể căn ngang một phần tử <div>
bằng cách đặt giá trị cho margin trái (margin-left) và margin phải (margin-right) là auto, với cấu trúc:
margin-left: auto; margin-right: auto;
Hoặc bạn có thể viết rút gọn thành:
margin: 0 auto; /* margin trên và dưới là 0, trái và phải là auto */
Ví dụ:
![Tổng hợp cách căn giữa CSS theo chiều ngang, dọc, hai chiều 12 Dùng thuộc tính margin: 0 auto; để thực hiện canh giữa CSS theo chiều ngang](https://static-xf1.vietnix.vn/wp-content/uploads/2024/07/dung-margin-0-auto.webp)
3. Dùng left: 50% và margin-left âm nửa chiều rộng
Phương pháp này hoạt động bằng cách đặt vị trí bên trái của phần tử thành 50% của phần tử cha (phần tử cha phải được xác định chiều rộng trước) và sau đó di chuyển sang trái bằng một nửa chiều rộng của chính nó. Cách thực hiện:
- Trước tiên bạn cần xác định phần tử HTML muốn căn giữa.
- Sau đó thêm các thuộc tính vào phần tử đã chọn: căn giữa
position: absolute;
left: 50%;
vàmargin-left: -50%;
.
position: absolute; left: 50%; margin-left: -50%;
4. Dùng transform: translateX(-50%); (khi phần tử có chiều rộng cố định)
Phương pháp này hiệu quả khi bạn đã biết chiều rộng của phần tử cần căn giữa. Nó hoạt động bằng cách di chuyển phần tử lùi lại một nửa chiều rộng của chính phần tử, thực thiện như sau:
- Định vị phần tử: Đảm bảo phần tử bạn muốn căn giữa đã được đặt
position: absolute
(nếu muốn căn giữa trong phần tử cha đã được định vị) hoặcposition: relative
(nếu muốn căn giữa trong chính vị trí thông thường của nó). - Di chuyển sang phải: Sử dụng
left: 50%;
để di chuyển cạnh trái của phần tử vào giữa phần tử cha (hoặc giữa chính nó nếu dùngposition: relative
). - Di chuyển về giữa: Sử dụng
transform: translateX(-50%);
để di chuyển phần tử lùi về bên trái một nửa chiều rộng của nó, giúp nó nằm chính xác ở giữa.
5. Dùng Flexbox
Flexbox là công cụ hiện đại để căn giữa các phần tử trên trang web cả theo chiều ngang và dọc. Tuy nhiên, trên một số trình duyệt cũ như Internet Explorer không sử dụng được Flexbox. Bạn chỉ cần thêm thuộc tính display: flex
và justify-content: center
cho phần tử cha là đã có thể thực hiện lệnh căn giữa CSS.
Ví dụ: Thực hiện căn giữa button trong HTML bằng CSS
.container { display: flex; justify-content: center; } button { /* Các kiểu khác cho button */ }
![Tổng hợp cách căn giữa CSS theo chiều ngang, dọc, hai chiều 13 Sử dụng Flexbox là cách hiện đại nhất để thực hiện căn giữa CSS](https://static-xf1.vietnix.vn/wp-content/uploads/2024/07/dung-Flexbox.webp)
3 cách căn giữa CSS theo chiều dọc
CSS căn giữa theo chiều dọc là kỹ thuật phân bổ các phần tử HTML từ trên xuống dưới trong trang web. Dưới đây là một số cách thực hiện thường dùng:
1. Dùng top: 50% và margin-top âm nửa chiều cao
Phương pháp này đặt vị trí của phần tử đến 50% chiều cao của phần tử cha và sau đó di chuyển lên trên bằng một nửa chiều cao của chính phần tử đó.
Các bước thực hiện kỹ thuật này:
- Đặt thuộc tính
position:relative
cho phần tử cha. - Tiếp đến, đối với phần tử con hãy đặt thuộc tính
position
thànhabsolution
vàtop
thành 50%. - Kế tiếp sử dụng thuộc tính
top: 50%
và margin-top âm nửa chiều cao.
2. Dùng transform: translate(0, -50%) hoặc transform:translateY(-50%)
Kỹ thuật transform này được dùng khi bạn không biết chiều cao của phần tử muốn căn giữa CSS. Cách thức hoạt động là di chuyển phần tử lên trên bằng một nửa chiều cao của chính phần tử đó. Đặt thuộc tính position
thành absolute
và đặt top
thành 50% đối với những phần tử con. Bây giờ chỉ cần sử dụng thuộc tính transform: translate(0, -50%);
thay vì sử dụng margin âm.
3. Dùng line-height
Phương pháp dùng line-height
chỉ hiệu quả để căn giữa một dòng văn bản. Cách thức hoạt động là giá trị line-height
của phần tử con phải bằng giá trị height
của phần tử cha.
4 cách căn giữa CSS hai chiều
Căn giữa hai chiều là phương pháp sắp xếp các nội dung của một phần tử được đặt ở trung tâm theo cả hai chiều ngang và dọc. Cùng xem ngay 4 cách thực hiện dưới đây;
1. Dùng CSS Absolute Positioning và Negative Margins
Đây là kỹ thuật kết hợp giữa định vị tuyệt đối (position: absolute;
top: 50%;
left: 50%
) và lề âm (margin-top: -[chiều cao phần tử]/2;
margin-left: -[chiều rộng phần tử]/2;
) để căn giữa phần tử. Bạn cần biết trước chiều rộng và chiều cao của phần tử để tính toán giá trị lề âm chính xác.
2. Dùng auto với absolute elements
Khi một phần tử được định vị tuyệt đối, bạn có thể sử dụng auto
cho left
, right
và width
(hoặc top
, bottom
, height
) để căn giữa phần tử.
3. Dùng Flexbox
Để căn giữa theo cả chiều ngang và dọc bạn cần sử dụng các thuộc tính:
display: flex;
cho phần tử cha.align-items: center
cho phần tử.justify-content: center;
căn đều 2 bên vào giữa phần tử bao gói cha.
![Tổng hợp cách căn giữa CSS theo chiều ngang, dọc, hai chiều 14 Căn giữa CSS theo hai chiều ngang và chiều dọc](https://static-xf1.vietnix.vn/wp-content/uploads/2024/07/Dung-Flexbox-1.webp)
4. Dùng grid
Dùng grid
để căn giữa hoàn toàn, với cấu trúc như sau:
.container { display: grid; min-height: 100vh; /* Sửa từ height thành min-height để linh hoạt hơn nếu nội dung nhiều */ place-items: center; } .centered-element { /* Các thuộc tính khác cho phần tử muốn căn giữa */ }
Trong đó:
.container
là phần tử chứadisplay:grid
.height: 100vh;
đặt chiều cao của.container
là 100% chiều cao của viewport, giúp nó chiếm toàn bộ không gian màn hình.place-items: center;
là một thuộc tính ngắn gọn trong Grid Layout, nó kết hợpalign-items: center;
vàjustify-items: center;
để căn giữa phần tử con trong grid container theo cả chiều ngang và chiều dọc.
Câu hỏi thường gặp
Tóm tắt các kỹ thuật căn giữa quan trọng
Có một số phương pháp căn giữa CSS quan trọng như:
Căn giữa theo chiều ngang:
– Dùng text-align: center
.
– Dùng margin: 0 auto
;
– Dùng left:50%
và margin-left âm nửa chiều rộng.
– Dùng transform: translateX(-50%);
– Dùng Flexbox.
Căn giữa theo chiều dọc:
– Dùng top: 50%
và margin-top âm nửa chiều cao.
– Dùng transform: translate(0, -50%)
hoặc transform: translateY(-50%)
.
– Dùng line-height
.
Căn giữa theo hai chiều:
– Dùng CSS Absolute Positioning và Negative Margins.
– Dùng auto
với absolute elements.
– Dùng Flexbox.
– Dùng grid
.
Câu hỏi và giải đáp về các vấn đề thường gặp khi căn giữa
Trong quá trình thực hiện căn giữa CSS, bạn có thể gặp phải những vấn đề như:
– Nội dung không được căn giữa chính xác: Hãy sử dụng phương pháp Flexbox hoặc Grid Layout hoặc đặt lại margin và padding về 0 cho các phần tử liên quan.
– Nội dung bị tràn ra ngoài container: Mở rộng kích thước container để chứa nội dung, thêm thanh cuộn dọc hoặc ngang cho container nếu cần thiết hoặc dùng thuộc tính overflow.
– Trình duyệt không tương thích: Sử dụng các thư viện CSS như Normalize.css hoặc Reset CSS để chuẩn hóa cách trình duyệt hiển thị các yếu tố HTML.
Lời khuyên và mẹo để tối ưu việc căn giữa trong CSS
Để tối ưu việc căn giữa trong CSS, bạn cần lưu một số vấn đề sau:
– Chọn phương pháp thích hợp như Flexbox, Grid Layout, text-align: center
, margin: 0 auto
.
– Sử dụng các kích thước phù hợp chẳng hạn như đơnvị tương đối (%, em, rem) và tránh sử dụng pixel cố định cho các giá trị căn chỉnh.
– Hiểu rõ về ngữ cảnh bố cục để giúp bạn chọn phương pháp, thuộc tính căn chỉnh giữa phù hợp.
– Kiểm tra tính tương thích trình duyệt.
– Sử dụng các công cụ hỗ trợ như DevTools, Lưới CSS, Thư viện CSS…
– Kiểm tra và chỉnh sửa để đảm đạt được kết quả mong muốn.
Lời kết
Có nhiều phương khác nhau để căn giữa CSS, chọn cách nào là tùy thuộc vào nhu cầu và bối cảnh sử dụng. Hy vọng với những chia sẻ trên bạn đã tìm được kỹ thuật phù hợp để có thể tạo ra các giao diện website chuyên nghiệp. Hãy thường xuyên theo dõi Vietnix để cập nhật những bài viết hữu ích khác về công nghệ thông tin.