Як центрувати зображення вертикально та горизонтально за допомогою 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.

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

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

Крок 1: Визначте абсолютну позицію

По-перше, ми змінюємо поведінку позиціонування зображення з staticна absolute:

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

Крім того, він повинен знаходитись у відносно розташованому контейнері, тому ми додаємо position: relativeдо його контейнера div.

Крок 2: Визначте властивості Top і Left

По-друге, ми визначаємо властивості для зображення вгорі та зліва та встановлюємо для них 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, щоб дізнатися більше.

Дякую за читання!