Центровка и выравнивание изображения в div CSS: без изменений

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

Чтобы выровнять изображение по центру внутри элемента div, пользуйтесь функционалом CSS Flexbox:

<div style="display: flex; align-items: center; justify-content: center; height: 200px;">
  <img src="image.jpg" alt="" style="max-width: 100%; max-height: 100%;">
</div>

Установленные свойства display: flex, align-items: center и justify-content: center обеспечивают горизонтальное и вертикальное выравнивание изображения. Для корректного отображения изображения в пределах блока устанавливаются max-width и max-height.

Различные методы выравнивания

Flexbox представляет собой изящный подход, однако давайте рассмотрим и другие способы.

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

Воспользуйтесь абсолютным позиционированием внутри родителя, заданного относительным:

<div style="position: relative; height: 200px;">
  <img src="image.jpg" alt="" 
       style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
</div>

Этот метод позволяет сместить изображение на половину его размера в противоположном направлении.

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

Использование inline-block

Inline-block будет полезен для обеспечения совместимости с устаревшими браузерами:

<div style="text-align: center; height: 200px; line-height: 200px;">
  <img src="image.jpg" alt="" style="vertical-align: middle; max-height: 100%;"> 
</div>

Здесь line-height равен высоте блока, что позволяет vertical-align центрировать изображение.

Применение CSS grid

CSS Grid предоставляет аналогичные возможности:

<div style="display: grid; place-items: center; height: 200px;">
  <img src="image.jpg" alt="" style="max-width: 100%; max-height: 100%;">
</div>

Свойство place-items обеспечивает универсальное центрирование содержимого по вертикали и горизонтали.

Проектные сценарии и их особенности

В каждом конкретном случае требуется свой подход к выравниванию.

Выравнивание в непредуказанном контейнере

Если размеры блока div не заданы, flexbox и grid могут легко адаптироваться к любым условиям.

Центрирование разных элементов

Чтобы центрировать любые элементы, включая не только изображения, можно использовать text-align: center; для горизонтального и line-height: для вертикального выравнивания, если высота элемента известна.

Совместимость с браузерами

Для обеспечения совместимости с такими браузерами, как IE6, используйте table-cell:

<div style="display: table-cell; vertical-align: middle; text-align: center; height: 200px;">
  <img src="image.jpg" alt="" style="vertical-align: middle;">
</div>

Сохранение пропорций

Чтобы сохранить исходные пропорции изображения, используйте max-width и max-height, избегая фиксированных размеров.

Противодействие смещению макета

Для предотвращения сдвига макета используйте атрибуты width и height или блочные элементы с фиксированными пропорциями.

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

Центрирование в блоке div настолько просто, как центрирование картины на стене:

Стена (🖼️): [.........]
Картина (🌄): ..🌄..

В случае div и изображения:

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

Графическое представление выглядит следующим образом:

🔲🔲🔲🔲🔳🖼️🔳🔲🔲🔲🔲

В блоке div изображение позиционируется строго посередине.

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

1. Выравнивание в CSS: Полное руководство | CSS-Tricks — подробное руководство по различным методам центрирования элементов с помощью CSS.
2. Центрирование элемента – CSS: Каскадные таблицы стилей | MDN — официальная документация MDN по центрированию с использованием разнообразных техник CSS.
3. Как центрировать изображение — примеры и руководства, объясняющие, как центрировать изображения в div.
4. html – Как мне вертикально центрировать div для всех браузеров с помощью CSS? – Stack Overflow — обсуждение сообщества с множественными решениями для вертикального выравнивания.
5. Полное руководство по Flexbox | CSS-Tricks — все о Flexbox, великолепном инструменте для центрирования содержимого.
6. Полное руководство по CSS Grid | CSS-Tricks — разъяснение работы CSS Grid Layout, другого подхода к форматированию содержимого, включая центрирование элементов.
7. Позиционирование · Bootstrap — использование утилит Bootstrap для выравнивания.