Trong CSS, làm sao để căn giữa một thẻ div trong một thẻ div khác?

Để căn giữa một thẻ div trong một thẻ div khác, có một số phương pháp khác nhau mà bạn có thể sử dụng tùy thuộc vào yêu cầu cụ thể của bạn và hỗ trợ trình duyệt. Dưới đây là một số cách phổ biến:

Sử dụng Flexbox

Flexbox là một cách hiện đại và linh hoạt để căn giữa các phần tử:

.parent {
  display: flex;
  justify-content: center; /* Căn ngang */
  align-items: center; /* Căn dọc */
}

.child {
  /* Chiều rộng và chiều cao có thể được thiết lập nếu cần */
}

Trong đoạn mã trên, .parent là class của thẻ div bên ngoài và .child là class của thẻ div bên trong.

Sử dụng Grid

CSS Grid cũng cung cấp một cách đơn giản để căn giữa các phần tử:

.parent {
  display: grid;
  place-items: center; /* Căn ngang và dọc */
}

.child {
  /* Chiều rộng và chiều cao có thể được thiết lập nếu cần */
}

Ở đây, place-items: center sẽ căn giữa .child cả về chiều ngang và chiều dọc bên trong .parent.

Sử dụng Position và Transform

Nếu bạn muốn sử dụng thuộc tính position, bạn có thể làm như sau:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Phương pháp này sử dụng transform để điều chỉnh vị trí của .child sao cho nó được căn giữa từ tâm của .parent.

Sử dụng Text-align và Margin Auto

Đối với việc căn ngang, bạn có thể sử dụng text-align: center trên .parent và margin: auto trên .child:

.parent {
  text-align: center;
}

.child {
  display: inline-block;
  margin: auto;
}

Lưu ý rằng text-align: center chỉ hoạt động với các phần tử nội tuyến hoặc inline-block, không với các phần tử block.

Chọn phương pháp phù hợp với yêu cầu của bạn và hỗ trợ trình duyệt mà bạn cần. Flexbox và Grid là các phương pháp hiện đại và được khuyến nghị sử dụng nếu hỗ trợ trình duyệt không phải là vấn đề.