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

Существует несколько способов разместить картинку по центру с помощью CSS. Один из них — использование свойств text-align и margin:

<div class="container">
 img src="image.jpg" alt="Картинка">
</div>

.container {
  text-align: center;
}

.container img {
  margin: 0 auto;
}

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

Еще один способ — использование свойства display и свойство margin:

<div class="container">
 img src="image.jpg" alt="Картинка">
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container img {
  margin: auto;
}

В этом примере мы задаем свойство display: flex для контейнера, чтобы мы могли использовать свойства justify-content и align-items для выравнивания картинки по центру как по горизонтали, так и по вертикали. Также мы задаем высоту контейнера на 100% видимой области (100vh). Затем мы задаем свойство margin: auto для картинки, чтобы она была выровнена по центру по горизонтали.