Hướng dẫn căn giữa div css

Lưu ý: Căn giữa sẽ không có hiệu lực nếu thuộc tính

.center {
  text-align: center;
  border: 3px solid green;
}

Căn giữa cho văn bản

Để căn giữa văn bản bên trong một phần tử, sử dụng

.center {
  text-align: center;
  border: 3px solid green;
}

Ví dụ:

.center {
  text-align: center;
  border: 3px solid green;
}

Căn giữa một hình ảnh

Để căn giữa một hình ảnh, thiết lập lề trái và lề phải thành

.center {
  text-align: center;
  border: 3px solid green;
}

.center {
  text-align: center;
  border: 3px solid green;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Căn chỉnh trái và phải – Sử dụng position

Một phương pháp để căn chỉnh phần tử là sử dụng

.center {
  text-align: center;
  border: 3px solid green;
}

Ví dụ:

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Lưu ý: Các phần tử có vị trí tuyệt đối bị xóa khỏi luồng thông thường và có thể chồng chéo các phần tử.

Căn chỉnh trái và phải – Sử dụng float

Phương pháp khác cho căn chỉnh phần tử là sử dụng thuộc tính float.
Ví dụ:

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

The clearfix Hack

Lưu ý: Nếu một phần tử là cao hơn phần tử chứa nó, và nó được thả nổi, nó sẽ tràn ra bên ngoài vùng chứa nó. Bạn có thể sử dụng “clearfix hack” để sửa lỗi này (xem ví dụ bên dưới):

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>


2

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;


2

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:


2

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:


2

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.


2

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ó.


2

Sử dụng flexbox

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


2

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:


2

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;


2

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.


2

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)