Позиціонування елементів на веб – сторінці є одним із важливих завдань веб-розробника. Коли потрібно створити елемент з абсолютним позиціонуванням і розмістити його по центру сторінки, виникають певні складності. У даній статті ми розглянемо методи, що дозволяють правильно розмістити елемент з position absolute для досягнення бажаного ефекту.
Одним з поширених способів розміщення елемента по центру сторінки з використанням position absolute є комбінація значень властивостей top, left, right і bottom. Якщо вам потрібно розмістити елемент по горизонталі – то використовуйте властивість left і задавайте значення рівне 50%. Потім, щоб центрувати по вертикалі, потрібно встановити властивість top і присвоїти йому значення 50%. Використовуючи значення властивостей top і left, а також половину висоти і ширини елемента, можна скорегувати положення елемента і досягти бажаного центрування.
Інший спосіб розміщення елемента з position absolute по центру-використання властивостей transform і translate. Для цього необхідно встановити значення властивості left в 50% і додати наступне поєднання властивостей: transform: translate(-50%, -50%);. Таке поєднання властивостей дозволяє центрувати елемент по горизонталі і вертикалі, враховуючи його розміри.
Як розмістити position absolute в центрі сторінки
Наступний код покаже, як розмістити елемент за допомогою position absolute в центрі сторінки за допомогою CSS:
.parent .childУ цьому прикладі створюється батьківський елемент з position relative. Потім вкладеному елементу (нащадку) задається position absolute. Значення властивостей top і left встановлюють елемент на 50% від верхнього і лівого країв батьківського елемента відповідно.
Властивість transform: translate (-50%, -50%); використовується для того, щоб встановити елемент точно по центру сторінки. Воно зміщує елемент на -50% від його власної висоти і ширини, що призводить до центрування.
Таким чином, за допомогою зазначених властивостей можна розмістити елемент з position absolute в центрі сторінки.
Що таке position absolute і навіщо його використовувати?
При використанні position absolute елемент виривається зі звичайного потоку елементів і позиціонується щодо контексту, зазначеного за допомогою властивостей top, bottom, left і right.
Основна мета використання position absolute - це створення елементів з абсолютним позиціонуванням, які не займають місце в потоці документа і можуть бути переміщені в будь-яке місце на сторінці. Це зручно при створенні слайдерів, модальних вікон, випадаючих меню та інших розділів, що вимагають точного позиціонування.
При використанні position absolute слід бути обережним, так як елементи з таким позиціонуванням можуть виходити за межі вікна браузера, що може позначитися на призначеному для користувача досвіді. Також важливо пам'ятати про правильне вказівку контексту позиціонування, щоб елементи розташовувалися саме там, де очікується.
Элемент с абсолютным позиционированием
У цьому прикладі елемент з абсолютним позиціонуванням розміщується всередині батьківського елемента з відносним позиціонуванням. За допомогою властивостей top: 50%; left: 50% і transform: translate(-50%, -50%) елемент виявляється точно посередині батьківського елемента як по горизонталі, так і по вертикалі.
Як центрувати position absolute по горизонталі
Використання властивості position: absolute дозволяє розмістити елемент в точній позиції на сторінці, щодо його найближчого позиціонованого батька або вікна перегляду. Проте, для досягнення горизонтального центрування з використанням position: absolute потрібна деяка додаткова робота.
Щоб центрувати елемент з абсолютним позиціонуванням по горизонталі, слід виконати наступні дії:
- Встановіть значення left: 50% для елемента, який потрібно відцентрувати. Це перемістить його ліву межу на половину ширини батьківського елемента.
- Додайте значення transform: translateX(-50%) або margin-left: -50% щоб перемістити елемент назад на половину власної ширини. Це призведе до центрування елемента.
Ось приклад використання обох властивостей разом:
Приклад CSS стилів:
.parent .child Застосовуючи ці стилі до батьківського та центрованого елементів, ви зможете досягти горизонтального центрування елемента за допомогою position: absolute .
Як центрувати position absolute по вертикалі
Установка position: absolute; елементу дозволяє повністю контролювати його позицію на сторінці. Але як центрувати такий елемент по вертикалі? Ось кілька способів зробити це:
position: absolute;top: 50%;transform: translateY(-50%);display: flex;justify-content: center;align-items: center;position: relative;display: flex;justify-content: center;align-items: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);Вибирайте найбільш зручний для Вас спосіб і застосовуйте його для центрування елементів з position: absolute; по вертикалі.
Як центрувати position absolute по горизонталі і вертикалі одночасно
Для центрування елемента за допомогою position: absolute; по горизонталі і вертикалі одночасно, додайте наступні властивості:
- left: 50%; - встановлює відстань від лівого краю батьківського елемента до лівого краю до елемента рівним 50%;
- top: 50%; - встановлює відстань від верхнього краю батьківського елемента до верхнього краю до елемента рівним 50%;
- transform: translate(-50%, -50%); - зміщує елемент назад на 50% його ширини і висоти, щоб досягти бажаного центрування.
Приклад використання властивостей:
.container .centered-element
Тепер елемент з класом centered-element буде центрований по горизонталі і вертикалі щодо батьківського елемента з класом container.