Оригінальна публікація: How to Center an Image Vertically and Horizontally with CSS

Багатьом розробникам важко працювати із зображеннями. Надзвичайно важко з адаптивністю та вирівнюванням, особливо посередині сторінки.

У цій публікації я покажу декілька поширених способів вертикального та горизонтального центрування зображення за допомогою різних властивостей CSS.

Горизонтальне центрування зображення

Розпочнемо з горизонтального центрування зображення за допомогою трьох різних властивостей CSS.

Text-Align

Перший спосіб: використати властивість text-align. Однак цей метод працює лише тоді, коли зображення знаходиться всередині контейнера на рівні блоку, наприклад <div>:

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

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

Margin: Auto

Другий спосіб: використати властивість margin: auto (для лівого та правого полів).

Однак просто використати margin: auto не вийде. Окрім margin: auto потрібно використати ще дві додаткові властивості.

Властивість margin-auto не впливає на рядкові елементи. Оскільки тег <img> є рядковим елементом, спершу потрібно конвертувати його в елемент на рівні блоку:

img {
  margin: auto;
  display: block;
}

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

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

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 не підтримується на старих версіях браузерів.

Вертикальне центрування зображення

Display: Flex

display: flex знову буде в нагоді.

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

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: абсолютна позиція

Спочатку ми змінюємо позиціювання зображення з 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%);
}

Існують інші способи горизонтального та вертикального центрування, але я описав найпоширеніші. Надіюсь, ця публікація допомогла вам зрозуміти, як вирівняти зображення посередині сторінки.

Дякую, що прочитали!