Як відцентрувати абсолютно спозиційований елемент

9 травня 2015 Опубліковано в css 3 Коментарів »

Іноді виникає завдання відцентрувати абсолютно спозиційований елемент. Пропоноване рішення видається очевидним після його реалізації. Горизонтальне розташування по центру статичного елемента за допомогою CSS зазвичай здійснюється за допомогою установки автоматичного значення лівого та правого зовнішнього відступів, наприклад:

Але це спосіб не спрацює, якщо в елемента абсолютне позиціонування. У цьому випадку його розташування визначається щодо безпосереднього батька, який має абсолютне, відносне або фіксоване позиціонування.

У наступному прикладі відносно спозиційованого червоного прямокутника ширина задана як 40% доступного простору. Значення відступу від верхньої межі у абсолютно спозиційованого синього квадрата становить 10px, а значення відступу від лівого кордону - 30px:

Якщо ми не впевнені в точних розмірах синього блоку, можна не задавати значення ширини, при цьому задаючи однакові значення для відступів від правої та лівої меж. Це розташує синій блок у центрі:

А як відцентрувати блок із заданими розмірами? Відповідь може бути дещо незвичайною:

  1. Для початку задаємо значення відступу від лівої межі 50%. Це пересуне лівий край синього квадрата до центру.
  2. Так як тепер квадрат зрушений сильно вправо, задамо негативне значення лівого зовнішнього відступу, що дорівнює половині ширини квадрата. У цьому прикладі потрібно встановити значення -50px, щоб квадрат повернувся на місце.

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