Как центрировать изображение в CSS

Чтобы центрировать изображение в CSS, можно использовать различные методы в зависимости от структуры и разметки HTML-кода.

1. C помощью text-align и margin:

Простейший способ центрировать изображение — это задать свойство text -align родительскому элементу, содержащему изображение, и установить для него свойство margin: 0 auto, чтобы центрировать изображение по горизонтали.

.parent{
  text-align: center; /* выравнивание текста по центру */
}

img{
  margin: 0 auto; /* центрирование изображения по горизонтали */
}

2. C помощью flexbox:

Можно использовать flexbox для центрирования изображения по горизонтали и вертикали по центру родительского элемента.

.parent{
  display: flex;
  justify-content: center;
  align-items: center;
}

3. C помощью position и transform:

Можно использовать абсолютное позиционирование и свойство transform для центрирования изображения по горизонтали и вертикали по центру родительского элемента.

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

img{
  position: absolute; /* задаем абсолютное позиционирование для изображения */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* центрирование изображения по горизонтали и вертикали */
}

Эти методы могут быть комбинированы между собой и дополнены другими свойствами для достижения нужного результата.