Как центрировать изображение в CSS

Человек за ноутбуком с изображениями на экране

Введение

Центрирование изображений — частая задача в вёрстке. Существует несколько корректных подходов, и выбор зависит от контейнера, требуемого поведения (фиксированная ширина, адаптивность) и необходимости вертикального выравнивания. Здесь показаны проверенные методы, когда они подходят и какие есть альтернативы.

Ключевые термины

Inline element — строчный элемент (img по умолчанию). Используйте display: block, чтобы управлять маргинами.
Flex container — блок с display: flex; удобен для горизонтального и вертикального выравнивания.

1. Метод margin: auto для горизонтального центрирования

Когда изображение превращается в блочный элемент, ему можно задать равные боковые отступы через margin-left и margin-right или короткую форму margin: 0 auto. Этот метод прост и совместим со старыми браузерами.

Пример (фиксированная ширина):

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}

Адаптивный вариант (процентная ширина):

img.responsive-center {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

Когда подходит

Горизонтальное центрирование одиночного изображения.
Контент должен сохранять ширину, заданную CSS.

Когда не подходит

Для вертикального центрирования потребуются другие методы.
Если изображение остаётся строчным (display: inline), margin: auto не сработает.

2. Flexbox для горизонтального и вертикального центрирования

Flexbox удобен, когда нужно центрировать содержимое контейнера как по горизонтали, так и по вертикали. Поместите изображение внутрь блока и примените правила к родителю.

HTML:

CSS:

div.center {
  display: flex;
  justify-content: center; /* по горизонтали */
  align-items: center;    /* по вертикали */
  height: 300px; /* пример высоты контейнера */
}

Примечания

Flexbox особенно полезен для центрирования внутри контейнера с фиксированной или относительной высотой.
Для адаптивного поведения комбинируйте с max-width и object-fit для изображений.

3. HTML-метод center (устаревший)

Тэг

устарел и не рекомендуется. Он может работать в старых проектах, но нарушает разделение разметки и стилей.

Пример (не рекомендуется):

Важно

Используйте CSS вместо устаревших HTML-тегов в современных проектах.

4. Альтернативы и дополнительные варианты

text-align: center

Работает для инлайн-элементов и текста. Если img остаётся строчным, достаточно задать text-align: center родителю.

.parent {
  text-align: center;
}
.parent img {
  display: inline-block; /* по желанию */
}

CSS Grid

Grid также легко центрирует элементы обеими осями.

.grid-center {
  display: grid;
  place-items: center; /* сокращение для align-items и justify-items */
  height: 300px;
}

vertical-align для строчных изображений

Для строчных изображений внутри строки можно использовать vertical-align, но это поведение связано с линией базиса и не даёт полного контроля, как Flexbox.

Когда методы не работают

Если у родителя нет ширины или его display блокирует ожидаемое поведение — проверьте CSS родителя.
Позиционирование (position: absolute) может потребовать отдельной логики центрирования (transform: translate(-50%, -50%)).

Пример абсолютного центрирования:

.wrapper {
  position: relative;
}
.wrapper img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Доступность и семантика

Всегда указывайте атрибут alt у тега img.
Для декоративных изображений используйте alt=”” и role=”presentation” по необходимости.
Центрирование не должно заменять семантическую разметку: если изображение — контент, размещайте его в соответствующем элементе (figure/figcaption при подписи).

Чеклист по ролям

Для верстальщика

Убедиться, что у img задан alt.
Выбрать метод (margin auto, flex, grid) в зависимости от контекста.
Проверить адаптивность и поведение при разных ширинах.

Для дизайнера

Задать желаемую ширину и поведение (фиксированная/адаптивная).
Уточнить, нужно ли вертикальное центрирование.

Для контент-менеджера

Загружать изображения с правильными пропорциями и размерами.
Не вставлять устаревшие теги вроде .

Критерии приёмки

Изображение горизонтально центрируется во всех ключевых точках просмотра (мобильная, планшет, десктоп).
Alt-текст указан и релевантен.
Нет горизонтального скролла из-за изображения.
Для вертикального центрирования проверено поведение при изменении высоты контейнера.

Шпаргалка Snippet

Горизонтальное центрирование (быстро):

img { display: block; margin: 0 auto; }

Центрирование в контейнере по обеим осям:

.container { display: flex; justify-content: center; align-items: center; }

Абсолютное центрирование:

.element { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

Совместимость и советы по миграции

margin: auto, text-align и absolute позиционирование поддерживаются всеми современными браузерами и старыми версиями.
Flexbox и Grid поддерживаются в актуальных версиях браузеров; для очень старых браузеров (IE11 и ниже) тестируйте поведение или добавляйте полифиллы/резервные решения.

Тестовые случаи и приёмка

Проверить центрирование при разных размерах окна браузера.
Проверить с изображением, ширина которого превышает ширину контейнера (результат зависит от max-width).
Проверить экранные чтецы: alt-текст озвучивается корректно.

1‑строчный глоссарий

margin: auto — автоматические отступы, выравнивают элемент внутри родителя.
justify-content — свойство Flexbox для выравнивания по главной оси.
align-items / place-items — выравнивание по поперечной оси в Flex/Grid.

Краткое резюме

Для простого горизонтального центрирования используйте display: block; margin: 0 auto.
Для центрирования по вертикали и горизонтали используйте Flexbox или Grid.
Избегайте устаревшего тега center и всегда добавляйте alt для доступности.

Важно: всегда проверяйте поведение на целевых устройствах и в целевых браузерах.