Центрирование изображения внутри div: горизонтально и вертикально

Быстрый ответ

Самый эффективный способ для центрирования изображения по вертикали и горизонтали — использования CSS Flexbox. Установите свойства display: flex; justify-content: center; align-items: center; для родительского div-контейнера. Ниже приведен пример кода:

<div style="display: flex; align-items: center; justify-content: center; height: 200px;">
  <img src="image.jpg" alt="Центрированное изображение">
</div>

Этот метод позволит вам точно расположить изображение в центре родительского div блока, независимо от его размеров.

Методы центрирования: альтернативные стратегии

Помимо flexbox, есть и другие способы CSS-центрирования изображений, каждый из которых может быть полезен в определённой ситуации.

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

Сочетание абсолютного позиционирования и margin: auto в пределах блока с position: relative обеспечивает великую степень контроля:

.parent {
  position: relative; /* определяем контекст позиционирования */
}
.centered-image {
  position: absolute; /* стоим во главе скрытых */
  margin: auto; /* взмах волшебной палочки */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* окутываем благом со всех сторон */
}

Подробнее об этом расскажет наш спикер на видео

Использование сетки CSS Grid

Современный подход, включающий CSS Grid, предполагает установку place-items: center:

.parent {
  display: grid; /* управляем сеткой мира */
  place-items: center; /* ... и все звёзды рассыпаются по местам */
  height: 200px;
}

Внутренние блоки: идеально для text-align и line-height

Для встроенных блоков или изображений в тексте предназначены text-align: center и соответствующие line-height и height для родительского блока:

.parent {
  text-align: center; /* гармония всего */
  line-height: 200px; /* гармония высоты */
  height: 200px;
}
.centered-image {
  display: inline-block; /* невидимое присутствие */
  vertical-align: middle; /* и снова гармония */
}

Адаптация методик центрирования для сложных сценариев

В некоторых сценариях требуется большая гибкость, чем может дать обычное центрирование.

Переполнение: практические меры

Если существует риск переполнения контейнера, содержимое лучше обернуть и применить overflow: auto к внешнему блоку:

.outer-container {
  display: flex; /* присоединяемся к клубу flex */
  align-items: center; /* нацеливаемся на цель */
  justify-content: center; /* приходим к балансу */
  overflow: auto; /* разблокируем ограничения */
  height: 200px; /* как колосс под проявительным слоем -->
}

Отзывчивое центрирование: относительные единицы измерения viewport

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

.parent {
  display: flex; /* ведём себя гибко */
  align-items: center; /* все к центру построиться! */
  justify-content: center; /* сладость центровки */
  height: 50vh; /* мы занимаем половину величия viewport */
}

Неизвестный размер: использование отрицательного отступа

При неизвестных размерах изображения использование transform: translate в сочетании с position: absolute дает наилучший результат:

.parent {
  position: relative; /* стоям на своем месте */
}
.centered-image {
  position: absolute; /* мы свободны в перемещении */
  top: 50%; /* полпути пройдено */
  left: 50%;
  transform: translate(-50%, -50%); /* и мы на месте */
}

Визуализация

Представьте себе мяч (∎) в центре большой площадки (□). Задача – удержать мяч всегда в центре, независимо от размеров площадки:

□━━━━━━━━━━□
┃           ┃
┃     ∎     ┃ <- Мяч (изображение) должен оставаться здесь
┃           ┃
□━━━━━━━━━━□

В CSS это можно сделать так:

.div { 
  display: flex; /* семейная феерия */
  justify-content: center; /* место встречи неизменно */
  align-items: center; /* прибыли, собрались */
}

Эта аналогия поможет вам понять роль justify-content и align-items в поддержании изображения в центре div-контейнера.

Распознавание и решение типичных проблем

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

Сохранение пропорций изображения

Чтобы изображение не теряло своих пропорций, особенно в адаптивном дизайне, используется CSS свойство object-fit:

img {
  object-fit: contain; /* или cover для полного заполнения */
  max-width: 100%; /* я подстраиваюсь */
  height: auto; /* адаптируюсь автономно */
}

Нарушение отступов

Неожиданные отступы могут составить препятствие для центровки. Убедитесь в их сбросе c помощью CSS:

img {
  margin: 0; /* отступов нет */
}

Управление наложением изображений

Для управления наложением изображений используйте z-index:

img {
  position: absolute; /* мы в свободном полёте */
  z-index: 1; /* мы на вершине мира */
}

Полезные материалы

1. Универсальное руководство по центрированию в CSS | CSS-Tricks — подробное руководство по разнообразным методикам центрирования.
2. Как центрировать изображение | W3Schools — инструкция по центрированию изображений внутри контейнеров.
3. Flexbox Froggy – игра для изучения CSS Flexbox — увлекательный способ освоения макета flexbox.
4. Flexbox – обучение веб-разработке | MDN — документация MDN по освоению и практическому применению flexbox.
5. Полное руководство по CSS Grid | CSS-Tricks — обстоятельный обзор сеточной системы CSS grid и ее возможностей.
6. Grid Garden – игра для обучения макету CSS grid — игра, позволяющая интересно и эффективно изучить принципы работы CSS grid.