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 `.pare...