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

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

img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 
  margin: auto;
}