Vai trò margin: auto để căn giữa ngang với CSS

Căn giữa ngang khối (block) với margin: auto

Khi phần tử khối (block-level) có chiều rộng xác định (width), đặt margin: auto (hoặc margin-left: auto; margin-right: auto) sẽ căn giữa nó ngang trong container cha.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 200px;
      margin: auto;
      border: 2px dashed blue;
    }
  </style>
</head>
<body>
  <p>Đây là văn bản demo</p>
  <div>
    Phần tử này được căn giữa ngang nhờ margin: auto;
  </div>
</body>
</html>

Điều kiện: Phần tử phải có display: block (mặc định của div) và width xác định (không phải auto). Không hoạt động cho phần tử inline.