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

1. Использование «text-align: center;» Свойство: если изображение содержится в элементе уровня блока, вы можете установить для свойства text-align этого элемента значение «center». Это позволит центрировать изображение внутри контейнера по горизонтали.

.container {
  text-align: center;
}

<div class="container">
  <img src="image.jpg" alt="Image" />
</div>

2. Использование flexbox: Flexbox — это мощный модуль макета CSS, который можно легко использовать для центрирования элементов. К элементу контейнера можно применить следующий CSS:

center;
align-items: center;

<div class="container">
  <img src="image.jpg" alt="Image" />
</div>

3. Использование сетки CSS: CSS-сетка — это еще один модуль макета, который позволяет создавать макеты на основе сетки. Вы можете центрировать изображение, определив сетку и используя «place-items: center;». свойство элемента контейнера.

.container {
  display: grid;
  place-items: center;
}

<div class="container">
  <img src="image.jpg" alt="Image" />
</div>

4. Использование абсолютного позиционирования: вы можете расположить изображение абсолютно внутри элемента-контейнера, а затем использовать свойства «left» и «top» вместе с «transform», чтобы центрировать его как по горизонтали, так и по вертикали.

<div class="container">
  <img src="image.jpg" alt="Image" />
</div>