Центрування через абсолютне позиціонування в CSS
Вивчаємо спосіб створення елемента з автоматичним розтягуванням за допомогою position: absolute та координат top, right, bottom, left.
Центрування через абсолютне позиціонування в CSS
За допомогою абсолютного позиціонування можна створювати елементи, які займають певну область екрана з однаковими відступами від усіх сторін.
Для цього потрібно задати position: absolute та одночасно вказати координати top, right, bottom і left.
Ширину та висоту елементу задавати не потрібно. Браузер сам розрахує його розмір.
Розтягування елемента через absolute
<div id="elem"></div>#elem {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid green;
}Центрування з однаковими відступами
Якщо задати однакові значення для всіх сторін, можна створити блок по центру екрана з потрібними відступами.
#elem {
position: absolute;
top: 100px;
right: 100px;
bottom: 100px;
left: 100px;
}Переваги такого способу
- Не потрібно задавати width та height.
- Розмір елемента розраховується автоматично.
- Можна легко створити область з однаковими відступами.
- Часто використовується для модальних вікон та повноекранних блоків.
Такий спосіб часто використовується для створення затемнення екрану, модальних вікон та центральних панелей.
Практичні завдання
- №1. Створіть блок, який буде мати відступ 100px від усіх країв екрана.
- №2. Створіть блок з відступом зверху 100px, справа 200px, знизу 50px та зліва 10px.
💡 Показати підказку
Не задавайте width і height. Використовуйте тільки position: absolute та чотири координати.
✅ Показати відповідь
#elem {
position: absolute;
top: 100px;
right: 100px;
bottom: 100px;
left: 100px;
}Приклад із різними відступами
#elem {
position: absolute;
top: 100px;
right: 200px;
bottom: 50px;
left: 10px;
}