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

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

img {
  display: block; /* делаем изображение блочным элементом */
  margin: 0 auto; /* задаем автоматические отступы сверху и снизу, а по горизонтали - автоматический отступ слева и справа */
}

Также можно использовать свойство text-align для центрирования картинки внутри родительского элемента:

.parent {
  text-align: center; /* задаем выравнивание по центру для содержимого родительского элемента */
}

.parent img {
  display: inline-block; /* делаем изображение встроенным элементом */
}

Оба варианта позволяют центрировать картинку по горизонтали. Если нужно центрировать картинку по вертикали, то можно использовать свойство position и transform:

.parent {
  position: relative; /* задаем позиционирование для родительского элемента */
}

.parent img {
  position: absolute; /* задаем абсолютное позиционирование для картинки */
  top: 50%; /* задаем отступ сверху на 50% от высоты родительского элемента */
  left: 50%; /* задаем отступ слева на 50% от ширины родительского элемента */
  transform: translate(-50%, -50%); /* сдвигаеминку на 50% от ее собственной ширины и высоты */
}