Исполняемые доки CSS: Картинка по центру

Q: Как выровнять картинку по центру в HTML?

Задайте text-align: center элементу, который ее содержит, например . Изображение по умолчанию строчное, поэтому центрируется как слово в тексте.

Q: Как выровнять картинку по центру через margin auto?

Сначала сделайте изображение блоком: img { display: block; margin: 0 auto; }. Auto-отступы не центрируют строчные элементы, а изображение строчное, пока вы это не измените.

Q: Как выровнять картинку по центру по вертикали и горизонтали?

Сделайте контейнер сеткой (или flexbox) с высотой: .box { display: grid; place-items: center; height: 300px; }. Изображение окажется посередине блока.

Q: Можно ли центрировать картинку тегом или align="center"?

Нет. и атрибут align у в HTML5 устарели. Браузеры все еще отображают для старых страниц, но align="center" у изображения выравнивает его по вертикали в строке, а не по горизонтали. Используйте CSS.

Быстрый ответ: text-align у родителя

<img> это строчный элемент: он стоит в строке текста как слово. Поэтому его центрируют так же, как текст, через text-align: center у родителя:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center an image</title>
  <style>
    .wrap { text-align: center; border: 1px dashed #9ca3af; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap" id="wrap">
    <img id="img" width="160" height="100" alt="Blue rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%232563eb'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Стиль задается div, а не изображению. text-align: center у самого <img> ничего не делает, потому что внутри изображения нет текста, который можно выровнять.

Способ 2: display block и margin auto

Если хотите оформлять само изображение, превратите его в блок и задайте автоматические боковые отступы. Свободное пространство с двух сторон делится поровну:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and margin auto</title>
  <style>
    .centered {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
    }
    .frame { border: 1px dashed #9ca3af; padding: 8px 0; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="frame">
    <img class="centered" id="img" width="160" height="100" alt="Green rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%2316a34a'/%3E%3C/svg%3E">
  </div>
  <div class="frame">
    <img style="margin: 0 auto;" id="inline" width="160" height="100" alt="Gray rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%239ca3af'/%3E%3C/svg%3E">
  </div>
</body>
</html>

У серого изображения есть margin: 0 auto, но оно остается в начале строки: auto-отступы не действуют на строчный элемент. Недостающая деталь это display: block. max-width: 100% вместе с height: auto не дает изображению вылезать за узкий экран и сохраняет его пропорции.

Способ 3: flexbox или grid, в том числе по вертикали

Чтобы выровнять изображение по центру в обоих направлениях внутри блока, задайте блоку высоту и центрируйте его содержимое через grid или flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center vertically</title>
  <style>
    .box {
      display: grid;
      place-items: center;
      height: 220px;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
    <img id="img" width="120" height="120" alt="Amber circle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='60' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Эквивалент на flexbox: display: flex; justify-content: center; align-items: center;. В обоих случаях блоку нужна высота больше, чем у изображения, иначе центрировать негде. Те же способы центрируют любой элемент; все они сравниваются на странице выравнивание div по центру.

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

Фотографии с подписью место в <figure>. Центрируйте содержимое figure, и изображение с подписью выстроятся вместе:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    figure {
      margin: 0;
      text-align: center;
    }
    figure img { max-width: 100%; height: auto; }
    figcaption { font-size: 14px; color: #4b5563; margin-top: 6px; }
  </style>
</head>
<body>
  <figure id="fig">
    <img id="img" width="200" height="120" alt="A mountain drawing"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect width='200' height='120' fill='%23bfdbfe'/%3E%3Cpath d='M0 120L70 40L140 120Z' fill='%2316a34a'/%3E%3Cpath d='M80 120L150 55L200 100V120Z' fill='%2315803d'/%3E%3C/svg%3E">
    <figcaption id="cap">Figure 1. A centered image with its caption.</figcaption>
  </figure>
</body>
</html>

Несколько картинок в ряд по центру

Ряд логотипов или миниатюр это задача для flexbox. justify-content: center центрирует группу, gap задает промежутки, а flex-wrap позволяет переносить на маленьких экранах, сохраняя центрирование:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered row</title>
  <style>
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px dashed #9ca3af;
    }
  </style>
</head>
<body>
  <div class="row" id="row">
    <img width="80" height="50" alt="Logo one" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%232563eb'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo two" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%2316a34a'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo three" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Какой способ выбрать

Ситуация	Что использовать
Изображение в абзаце или простом блоке	`text-align: center` у родителя
Можно оформлять только изображение	`display: block; margin: 0 auto;`
По центру в обоих направлениях внутри блока	Grid `place-items: center` (или flexbox) у блока
Ряд изображений	Flexbox с `justify-content: center`
Изображение с подписью	`<figure>` с `text-align: center`
Фоновая картинка, а не содержимое	`background-position: center`, смотрите фоновое изображение

Старые способы и почему не стоит

В старых учебниках их все еще можно встретить:

<!-- obsolete: do not use -->
<center><img src="logo.png" alt="Logo"></center>
<img src="logo.png" alt="Logo" align="center">

<center> и атрибут align удалены из HTML. Браузеры все еще отображают <center> ради обратной совместимости, а align="center" у изображения даже не центрирует его по горизонтали: браузеры воспринимают это как вертикальное выравнивание в строке. Используйте один из способов CSS выше.

Частые ошибки

text-align: center у <img>. Задайте его родителю.
margin: 0 auto у строчного изображения. Добавьте display: block.
Вертикальное центрирование без высоты у родителя. Блок сжимается до изображения, и центрировать негде.
float: center. Такого значения нет. Float прижимает только к стороне.
Забытый alt. Изображению по центру все равно нужен альтернативный текст; alt="" только для чисто декоративных изображений.
Растянутое изображение. Если задать в CSS и width, и height с другим соотношением, оно искажается. Задайте одно из них и height: auto или добавьте object-fit: cover.

Часто задаваемые вопросы

Как выровнять картинку по центру в HTML?

Задайте text-align: center элементу, который ее содержит, например <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>. Изображение по умолчанию строчное, поэтому центрируется как слово в тексте.

Как выровнять картинку по центру через margin auto?

Сначала сделайте изображение блоком: img { display: block; margin: 0 auto; }. Auto-отступы не центрируют строчные элементы, а изображение строчное, пока вы это не измените.

Как выровнять картинку по центру по вертикали и горизонтали?

Сделайте контейнер сеткой (или flexbox) с высотой: .box { display: grid; place-items: center; height: 300px; }. Изображение окажется посередине блока.

Можно ли центрировать картинку тегом <center> или align="center"?

Нет. <center> и атрибут align у <img> в HTML5 устарели. Браузеры все еще отображают <center> для старых страниц, но align="center" у изображения выравнивает его по вертикали в строке, а не по горизонтали. Используйте CSS.

Почему под картинкой по центру небольшой зазор?

Строчное изображение стоит на базовой линии текста, и под ним остается место для выносных элементов букв. Задайте изображению display: block или vertical-align: middle, и зазор исчезнет.

Связанные концепции

Как выровнять картинку по центру в HTML и CSS