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

Для того чтобы отцентрировать изображение в блоке документа, проще всего воспользоваться Flexbox. Для создания условий работы с помощью flex, необходимо "обернуть" центрируемый элемент в контейнер. В нашем пример это просто тег <div>.

Рассмотрим пример:

<div class="img-box">
  <img src="test-image.jpg">
</div>

Стили:

.img-box {
  /* Сделаем видимую границу у контейнера */
  border: 1px solid #000;
  width: 300px;
  height: 300px;
  /* Включаем режим отображения flex и добавляем 
  центрирование по вертикали и горизонтали */
  display: flex;
  justify-content: center;
  align-items: center;
}

Результат:

Можно сделать через абсолютное позиционирование

Для начала обернем картинку в контейнер <div> и уже его будет центровать

HTML код будет выглядеть так:

<div>
     <img src="https://sun9-42.userapi.com/impg/TBJv8JwlVtB6n5iFZ9kJpII63pbPDgwC2KPxGQ/mZHlLwFVQNA.jpg?size=233x308&quality=96&sign=97ef9ef22b45ffb5fa7c048f2532fd0d&type=album">
</div>

И уже в CSS в класс center мы добавляем свойства

img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}