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

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

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

<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;
}

Картинку по горизонтали проще всего центрировать, сделав её блочной и задав автоотступы:

<img class="photo" src="cat.jpg" alt="Кот">

По умолчанию <img> — строчный элемент, и margin: auto на него не действует. display: block это исправляет.

Через родителя

Картинку внутри блока центрирует text-align: center у родителя:

.wrapper {
  text-align: center;
}

По центру и по горизонтали, и по вертикали

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

Или короче через grid:

.wrapper {
  display: grid;
  place-items: center;
  height: 400px;
}

Картинка с подписью

<figure class="figure">
  <img src="chart.png" alt="График продаж">
  <figcaption>Продажи за 2025 год</figcaption>
</figure>

Фоновая картинка по центру

.hero {
  background-image: url("bg.jpg");
  background-position: center;
  background-size: cover;
}

Почему не центрируется

• margin: 0 auto без display: block — картинка остаётся строчной.
• text-align: center задали самой картинке — свойство нужно родителю.
• Для вертикального центра у родителя нет высоты — задайте height или min-height.

Атрибут align="center" у <img> устарел, используйте CSS.

Вёрстку разбирают в курсе «Профессиональная вёрстка».