Как поместить картинку по центру в CSS

Для того чтобы поместить картинку по центру на веб-странице при помощи CSS, можно использовать следующие свойства:

img {
  display: block; /* устанавливает элемент в виде блока */
  margin: auto; /* устанавливает автоматический отступ */
}

Если вам нужно центрировать картинку по горизонтали или вертикали, то можно использовать свойства text-align и vertical-align соответственно.

/* Центрирование по горизонтали */
div {
  text-align: center;
}

/* Центрирование по вертикали */
div {
  display: flex; /* Создаем контейнер Flexbox */
  justify-content: center; /* Выравниваем по горизонтали */
  align-items: center; /* Выравниваем по вертикали */
}

Вы можете использовать эти свойства для картинки внутри любого элемента, включая div, section и article.