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

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

CSS свойство: text-align

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

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="your-image.jpg">
</div>

CSS свойство: margin:auto

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

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

Поскольку тег <img> является инлайн-элементом, нам нужно сначала преобразовать в элемент блочного уровня:

img {
  margin: auto;
  display: block;
}

Кроме того, необходимо определить ширину изображения. Для этого левый и правый отступы могут занять оставшееся свободное пространство и автоматически выровняться.Именно такой подход позволяет добиться нужного эффекта (если мы не указываем ширину 100%):

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

CSS свойство: display: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 не поддерживается в старых версиях браузеров.

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

Css свойство: display: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

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

Шаг 1: Определение позиции Absolute

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

div {
  height: 800px;
  position: relative;
  background: red;
}

img {
  width: 80%;
  position: absolute;
}

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

Шаг 2: Определение свойств Top и Left

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

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

Шаг 3: Определение свойства Transform

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

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

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

Заключение. Центрирование изображения на CSS

Существуют и другие способы центрирования элементов по горизонтали и вертикали, но я объяснила наиболее распространенные. Я надеюсь, что этот пост помог вам понять, как выровнять ваши изображения по центру страницы.