Căn giữa hình ảnh với CSS (margin auto + display block)

Căn giữa ảnh ngang (Horizontal Center)

Kỹ thuật kinh điển: **`display: block` + `margin-left: auto` + `margin-right: auto`**. Ảnh phải là block-level element để margin auto hoạt động.

Ví dụ cơ bản

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      border: 2px solid orange;
      border-radius: 3px;
      padding: 7px;
      /* Căn giữa: */
      display: block;           /* Bắt buộc: block-level */
      margin-left: auto;
      margin-right: auto;
      width: 50%;               /* Rộng 50% container */
    }
  </style>
</head>
<body>
  <img src="coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
</body>
</html>

Tại sao cần display: block?

`` mặc định `display: inline` (như chữ).
`margin: auto` chỉ hoạt động trên **block-level** element có width xác định.
`display: block` chuyển img thành block, cho phép margin auto.

Các cách căn giữa ảnh khác (Hiện đại)

Phương pháp	CSS	Ưu điểm
Margin auto (Classic)	`display: block; margin: 0 auto;`	Hỗ trợ mọi trình duyệt cũ
Flexbox	Cha: `display: flex; justify-content: center;`	Căn giữa cả ngang & dọc, responsive
Grid	Cha: `display: grid; place-items: center;`	Ngắn gọn, căn giữa 2 chiều
Text-align	Cha: `text-align: center;` (img inline)	Đơn giản, không cần đổi display img
Margin auto + Flex	Con: `margin: auto;` trong flex container	Căn giữa 2 chiều cho single item

Ví dụ: Flexbox Center (Khuyên dùng hiện nay)

.image-container {
  display: flex;
  justify-content: center;  /* Căn giữa ngang */
  align-items: center;      /* Căn giữa dọc (nếu container có height) */
  gap: 16px;                /* Khoảng cách nếu nhiều ảnh */
}

.image-container img {
  max-width: 100%;
  height: auto;
}

Căn giữa cả ngang và dọc (Dead Center)

.dead-center {
  display: grid;
  place-items: center;      /* Rút gọn của align-items + justify-items */
  min-height: 100vh;        /* Chiều cao viewport */
}
.dead-center img {
  max-width: 100%;
  max-height: 100%;
}

Lưu ý

Luôn set `max-width: 100%; height: auto;` cho ảnh responsive.
Tránh `width: 100%` cứng nếu ảnh nhỏ hơn container (sẽ bị kéo giãn).
Với Flexbox/Grid trên container, **không cần** `display: block` trên img.