مرکز قرار دادن عکس در CSS می‌تونه هم به صورت افقی (Horizontally) باشه، هم عمودی (Vertically) یا حتی هر دو باهم.

🔹 ۱. مرکز افقی با display: block

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* اختیاری */
}

✅ این روش ساده‌ترین روش برای وسط چین کردن افقی عکس هست.

🔹 ۲. مرکز افقی با Flexbox

.container {
  display: flex;
  justify-content: center; /* افقی */
}

.container img {
  width: 200px;
}

🔹 ۳. مرکز افقی و عمودی با Flexbox

.container {
  display: flex;
  justify-content: center; /* افقی */
  align-items: center;     /* عمودی */
  height: 100vh;           /* پر کردن کل صفحه */
}

.container img {
  width: 200px;
}

✅ تصویر دقیقاً در وسط صفحه قرار می‌گیره.

🔹 ۴. مرکز با Grid

.container {
  display: grid;
  place-items: center; /* افقی و عمودی */
  height: 100vh;
}

.container img {
  width: 200px;
}

🔹 ۵. مرکز عمودی با position

.container {
  position: relative;
  height: 100vh;
}

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

✅ این روش دقیق‌ترین حالت برای قرارگیری وسط صفحه است.

🔸 پس برای وسط چین کردن عکس:

• ساده‌ترین روش → margin: auto

• مدرن‌ترین روش → flexbox یا grid

• دقیق‌ترین روش → position + transform