Центруємо зображення як профі: Все про вирівнювання картину по центру в CSS

Сьогодні ми поговоримо про одне з тих базових, але надзвичайно важливих питань у веб-дизайні — як вирівняти картинку по центру сторінки за допомогою CSS. Ви коли-небудь стикалися з ситуацією, коли потрібно було розмістити зображення акурат в середині, але замість “чаклунства” з пікселями хочеться зробити усе чисто і професійно? Ну що ж, саме час отримати ці дані у свій креативний арсенал!

Починаємо з основ: визначаємо метод

Добре, отже, куди рухаємось? В CSS є декілька способів вирівняти картинку, і ми сьогодні розглянемо основні з них. До речі, ці ж методи підійдуть не тільки для картинок, а й для блоків, тексту, кнопок та інших елементів, тому знання буде максимально універсальним.

Метод 1: Flexbox

Перший спосіб, який ми розглянемо — і це зараз mega популярний Flexbox. Цей інструмент є справжньою паличкою-виручалочкою у світі веб-дизайну.

1. Створіть контейнер для картинки і встановіть йому стилі display: flex;
2. Задайте justify-content: center; щоб вирівняти елементи по горизонталі;
3. Щоб у цей же час вони вирівнялися і по вертикалі, використовуйте align-items: center;.

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

Приклад CSS коду:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* висота контейнера */
}

Задавши такі стилі, ваша картинка знаходитиметься точно в центрі контейнера. І це дивовижно!

Метод 2: Таблиці CSS

Ой, таблиці, ви скажете? Так, таблиці. Але не ті HTML-таблиці, куди декілька років тому ще можна було вставити картинку. Ми говоримо про display property у CSS. Саме вона дає нам можливість зробити елемент подібним до таблиці чи комірки таблиці. Будемо використовувати display: table і display: table-cell.

1. Створіть контейнер і задайте йому display: table;
2. Помістіть картинку в цей контейнер і встановіть їй display: table-cell;
3. Тепер, щоб картинка опинилася в центрі, використаємо text-align: center; і vertical-align: middle;.

.table-container {
  display: table;
  width: 100%; /* максимальна ширина */
  height: 100vh; /* висота контейнера */
}
.image {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Цей метод чудово працює і є надійним, хоч і може здаватись дещо застарілим. Але не забуваємо, що він універсальний і підтримується усіма браузерами!

Метод 3: Абсолютне позиціонування

Далі йде гаряча класика — абсолютне позиціонування. Тут ми використовуватимемо position: absolute; комбінуємо його з властивостями top, left і transform.

1. Спочатку створимо контейнер та задамо йому позицію relative, щоб абсолютно позиціоновані в ньому елементи відраховувалися саме від його країв;
2. Тепер картинці присвоюємо position: absolute; і розміщуємо її на 50% від верху and 50% від лівого боку контейнера;
3. Застосовуємо CSS-трансформацію transform: translate(-50%, -50%); щоб точно вирівняти картинку по центру.

.relative-container {
  position: relative;
  height: 100vh; /* висота контейнера */
}

.absolute-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

І ось воно, зображення як було закарбовано в самісіньку серединку! Елегантно і просто.

Простір для творчості: комбінування методів

Тепер, коли ви озброїлися базовими методами, не бійтеся експериментувати. Комбінуйте їх, досягайте ідеальних результатів у конкретних ситуаціях. Також не забувайте про відзивчивість: ваше зображення повинно виглядати ідеально на будь-якому пристрої. Для цього використовуйте медіазапити і встановлюйте розміри картинок у відсотках чи за допомогою vw/vh.

Заключні думки

Ви бачите, вирівняти картинку по центру — справжнє мистецтво. Але тепер, зі зброєю у вигляді знань та прикладів коду, ви певно станете непереможними у цій темі. Сміливо креативте, творіть і пробуйте нове. І нехай вам завжди співпадають краї контейнера з центром картинки!

Успіхів у кодуванні та дизайні!