Căn Giữa Phần Tử HTML Bằng CSS (Ngang, Dọc đầy đủ) - Phú Kio

Nếu bạn là người mới học CSS chắc chắn sẽ rất đau đầu khi cân giữa các phần tử trong HMTL.

Và cũng có thể cũng gặp trường hợp làm được, trường hợp không.

Hướng dẫn này sẽ giúp bạn hiểu rõ từng trường hợp.

Từ đó có thể căn giữa mọi thể loại phần tử HTML bằng CSS.

Bắt đầu nào!

Căn giữa trong CSS theo chiều ngang

Để căn giữa theo chiều ngang trong CSS khá đơn giản, bạn có thể thực hiện theo 3 cách sau đây:

Căn giữa với thuộc tính text-align:center;

Sử dụng thuộc tính: text-align:center; để cân giữa chữ trong 1 phần tử hoặc căn giữa các phần tử inline-block như <a>, <img>, <span>,…. (xem thêm)

• Trường hợp các phần tử block có thể sử dụng thuộc tính display: inline-block; để chuyển đổi.

Ví dụ dưới đây căn giữ chữ trong thẻ <p> và căn giữa các thẻ <span> trong thẻ <div>

Căn giữa với thuộc tính margin:auto;

Sử dụng thuộc tính: margin: atuo; để căn giữa các phần tử block như: <div>, <p>, <ul>, <li>, <main>,…

• Chỉ hoạt động khi thuộc tính width được chỉ định và width phải nhỏ hơn 100%.

Ví dụ căn giữa thẻ <main> với thuộc tính margin:auto;

Căn giữa nhiều phần tử con trong phần tử cha

Trường hợp bạn muốn căn chỉnh tất cả phần tử con, có thể áp dụng 2 thuộc tính display: flex; và justify-content: center; vào phần tử cha.

Hoặc có thể sử dụng display:inline-block; để chuyển chắc phần tử con sang inline-bock sau đó dùng thuộc tính text-align:center; vào phần tử cha.

Ví dụ căn giữa các phần tử <p> trong 2 <div> sau:

Căn giữa trong CSS theo chiều dọc

Căn giữa theo chiều dọc trong CSS phức tạp hơn đôi chút.

Những vẫn có rất nhiều các làm.

Phần tử chỉ có 1 dòng

Sử dụng thuộc tính line-height, sử dụng thêm thuộc tính white-space: nowrap; nếu text có nhiều dòng.

Hoặc sử dụng thuộc tính padding-top và padding-bottom với giá trị bằng nhau.

Xem thử ví dụ dưới đây:

Phần tử có nhiều dòng

Biết chiều cao của phần tử

Trường hợp biết chiều cao phần tử, các bạn sử dụng thuộc tính position:absolute; kết hợp với top:50%; và margin-top (giá trị bằng âm nữa chiều cao phần tử).

• Position:absolute; yêu cầu phần tử cha phải khác position:static;
• Top:50% để dịch chuyển phần tử xuống 50% theo top của phần tử cha.
• Margin-top (giá trị bằng âm nữa chiều cao phần tử) để dịch chuyển phần tử lên đúng chính giữa.

Không biết chiều cao của phần tử

Trường hợp không biết chiều cao phần tử các bạn sử dụng thuộc tính position:absolute; kết hợp với top:50%; và transform: translateY(-50%);

• Position:absolute; yêu cầu phần tử cha phải khác position:static;
• Top:50% để dịch chuyển phần tử xuống 50% theo top của phần tử cha.
• Transform: translateY(-50%); tương tự như Margin-top (giá trị bằng âm nữa chiều cao phần tử)

Tham khảo thêm thuộc tính position để hiểu cách hoạt động của nó.

Sử dụng flexbox

Sử dụng thuộc tính display:flex; và Align-items:center; cho phần tử cha.

Căn giữa cả chiều ngang và chiều dọc

Sử dụng thuộc tính position:absolute;

Các bạn sử dụng thuộc tính sau:

• Position:absolute; yêu cầu phần tử cha phải khác position:static;
• Top:50%; để dịch chuyển phần tử xuống dưới 50% theo top của phần tử cha.
• Left:50%; để dịch chuyển phần sang phải 50% theo left của phần tử cha.
• Transform: translate(-50%, -50%); tương tự như Margin-top (giá trị bằng âm nữa chiều cao phần tử) và margin-left(giá trị bằng âm nữa chiều rộng phần tử)

Tham khảo ví dụ dưới đây:

Sử dụng thuộc tính display:flex;

Các bạn sử dụng thuộc tính sau cho phần tử cha:

• Display:flex;
• Justify-content:center;
• Align-items:center;

Sử dụng thuộc tính display:grid;

Thêm thuộc tính display:grid; vào phần tử cha

Và thêm thuộc tính margin:auto; vào phần tử con.

Trường hợp có nhiều phần tử con

Nếu có nhiều phần tử con trong 1 phần tử cha:

• Sử dụng position:absolute; có thể cân giữa 1 hoặc nhiều phần tử tùy ý(chỉ việc thêm thuộc tính vào các phẩn tử bạn muốn căn chỉnh)
• Sử dụng display:flex; chỉ có thể căn giữa tất cả phần tử.
• Không thể sử dụng display:grid;

Tổng kết

Có nhiều cách để căn giữa một hoặc nhiều phần tử trong CSS, tùy vào trường hợp các bạn có thể chọn cách làm phù hợp.

Sử dụng position:absolute; và display:flex; là 2 cách làm hiệu quả trong hầu hết trường hợp.

Bạn cũng có thể sử dụng position:absolute; để căn chỉnh theo ý muốn. (Nhớ phần tử cha phải có position khác giá trị static)

Xin chào và hẹn gặp lại bạn trong các bài viết khác trên website phukio.com