HTML Картинка по центру

html

  

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

css
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* настраиваем высоту контейнера по своему усмотрению */
}

В этом примере мы использовали Flexbox-модель для центрирования изображения как по горизонтали, так и по вертикали.

Пример 2:

Еще один способ - это использование позиционирования при помощи CSS. Создадим следующий HTML-код:

html

  

И добавим следующие CSS-стили для класса `center`:

css
.center {
  position: relative;
  text-align: center;
  height: 100vh; /* настраиваем высоту контейнера по своему усмотрению */
}
.center img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Здесь мы использовали позиционирование относительно родительского блока и установили `text-align: center` для самого блока, чтобы изображение выровнялось по горизонтали. Затем мы задали позиционирование абсолютно для самого изображения и выровняли его по центру с помощью `top: 50%`, `left: 50%` и `transform: translate(-50%, -50%)`.

В обоих примерах можно настроить высоту контейнера `