Как центрировать изображение по вертикали и горизонтали с помощью CSS

Многие разработчики испытывают трудности при работе с изображениями. Обработка отзывчивости и выравнивания особенно сложна, особенно центрирование изображения по центру страницы.

Итак, в этом посте я покажу некоторые из наиболее распространенных способов центрировать изображение как по вертикали, так и по горизонтали с использованием различных свойств CSS.

В предыдущем посте я рассмотрел свойства CSS Position и Display. Если вы не знакомы с этими свойствами, я рекомендую проверить эти сообщения перед чтением этой статьи.

Вот видео-версия, если вы хотите это проверить:

Центрирование изображения по горизонтали

Начнем с центрирования изображения по горизонтали, используя 3 различных свойства CSS.

Выравнивание текста

Первый способ центрировать изображение по горизонтали - использовать text-alignсвойство. Однако этот метод работает, только если изображение находится внутри контейнера уровня блока, такого как :

 div { text-align: center; } 

Маржа: Авто

Другой способ центрировать изображение - использовать margin: autoсвойство (для левого поля и правого поля).

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

Свойство margin-auto не влияет на элементы встроенного уровня. Поскольку тег является встроенным элементом, нам нужно сначала преобразовать его в элемент уровня блока:

img { margin: auto; display: block; }

Во-вторых, нам также нужно определить ширину. Таким образом, левое и правое поля могут занимать остальную часть пустого пространства и автоматически выравниваться, что делает свое дело (если мы не зададим ему ширину 100%):

img { width: 60%; margin: auto; display: block; }

Дисплей: Flex

Третий способ центрировать изображение по горизонтали - использовать display: flex. Так же, как мы использовали text-alignсвойство для контейнера, мы также используем его display: flexдля контейнера.

Однако display: flexодного использования будет недостаточно. Контейнер также должен иметь дополнительное свойство, называемое justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

justify-contentСвойство работает вместе с display: flex, который мы можем использовать для центрирования изображения по горизонтали.

Наконец, ширина изображения должна быть меньше ширины контейнера, в противном случае оно занимает 100% пространства, и тогда мы не сможем его центрировать.

Важно:display: flex свойство не поддерживается в старых версиях браузеров. Подробнее см. Здесь.

Центрирование изображения по вертикали

Дисплей: Flex

Для вертикального выравнивания display: flexснова очень полезно использование.

Рассмотрим случай, когда наш контейнер имеет высоту 800 пикселей, но высота изображения всего 500 пикселей:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Теперь, в этом случае, добавление одной строки кода к контейнеру align-items: centerпомогает:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

В align-itemsэлементах позиции свойства может вертикально , если они используются вместе с display: flex.

Позиция: Absolute & Transform Properties

Другой метод вертикального выравнивания - совместное использование свойств positionи transform. Это немного сложно, поэтому давайте сделаем это шаг за шагом.

Шаг 1. Определите абсолютную позицию

Во-первых, мы меняем поведение изображения с staticна absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Кроме того, он должен находиться внутри относительно расположенного контейнера, поэтому мы добавляем position: relativeв его контейнер div.

Шаг 2. Определите верхнее и левое свойства

Во-вторых, мы определяем верхнее и левое свойства изображения и устанавливаем их на 50%. Это переместит начальную точку (вверху слева) изображения в центр контейнера:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

Шаг 3. Определите свойство преобразования

Но на втором этапе изображение частично переместилось за пределы контейнера. Поэтому нам нужно вернуть его внутрь.

Определение transformсвойства и добавление -50% к его осям X и Y помогает:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Есть и другие способы центрировать объекты по горизонтали и вертикали, но я объяснил наиболее распространенные из них. Надеюсь, этот пост помог вам понять, как выровнять изображения по центру страницы.

Если вы хотите узнать больше о веб-разработке, посетите мой канал на Youtube.

Спасибо за чтение!