Làm sao để căn chỉnh nội dung của thẻ <p> nằm ngay trung tâm của thẻ <div> trong CSS?

Để căn chỉnh nội dung của thẻ <p> nằm ngay trung tâm của thẻ <div>, bạn cần căn chỉnh cả theo chiều ngang (horizontal) và chiều dọc (vertical). Dưới đây là một số cách thực hiện:

Sử dụng Flexbox

Flexbox là một cách hiện đại và linh hoạt để căn chỉnh các phần tử. Bạn có thể sử dụng display: flex trên thẻ <div> và sau đó sử dụng justify-content: center để căn ngang và align-items: center để căn dọc.

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* Hoặc bất kỳ giá trị nào bạn muốn */
}

Sử dụng Position và Transform

Một cách khác là sử dụng position: relative cho thẻ <div> và position: absolute cùng với transform: translate(-50%, -50%) cho thẻ <p>. Điều này sẽ đặt thẻ <p> chính giữa thẻ <div>.

div {
  position: relative;
  height: 100px; /* ...