Центрування в CSS: повне керівництво
Центрування елементів - найпопулярніша причина для скарг на CSS. «Ну чому не можна було зробити все простіше?» - обурюються всі кому не лінь. Думаю, проблема не в тому, що це складно зробити, а в тому, що способів центрування елементів таку силу-силенну, що буває важко вибрати підходящий.
Давайте побудуємо деревоподібну схему для прийняття рішення і будемо сподіватися, що це все трохи спростить.
Центрування по горизонталі
Рядкові елементи (тексти, посилання) з типом відображення inline. inline-block. inline-table. inline-flex. всередині батьківського блочного можна центрувати так:
Блоковий елемент можна центрувати, вказавши для margin-left і margin-right значення auto (а також прописавши для нього конкретний width. Інакше він займе всю ширину батьківського контейнера і не потребуватиме центруванні). Для цього часто використовують скорочену запис:
Спосіб працює незалежно від ширини центрована блочного елемента і його батька. Зверніть увагу, що змусити елемент плавати по центру за допомогою float можна.
Кілька блокових елементів. розміщені в ряд. які потрібно центрувати по горизонталі. Можливо, вам буде потрібно змінити тип display. Необхідно вказати для них тип відображення inline-block або застосувати flexbox:
У тому ж випадку, якщо у вас кілька блокових елементів розміщені один над одним, цілком спрацює прийом з автоматичними відступами.
Центрування по вертикалі
З вертикальним центрированием в CSS все трохи складніше:
Елемент сатиричного типу поміщається в один рядок:
Іноді рядкові / текстові елементи можуть виглядати відцентрувати по вертикалі тільки тому, що у них однакові верхнє і нижнє поля (padding).
Якщо використання полів з якої-небудь причини неможливо, а ви хочете відцентрувати текст, який точно не буде переноситися в наступний рядок, можна використовувати хитрість з установкою line-height рівній висоті елемента, це відцентруйте текст:
Центрування кількох рядків тексту можна зробити за допомогою установки однакових верхнього і нижнього полів, однак, якщо цей варіант не підходить, можна зробити елемент, в який поміщений текст, осередком таблиці - буквально або ж просто її імітацією на CSS. За центрування в цьому випадку відповідає властивість vertical-align. незважаючи на те, що зазвичай він просто виравніванівает по горизонталі елементи в ряду.
Якщо відбувається імітація таблиці, варто використовувати flexbox. Один дочірній flex-елемент можна досить легко відцентрувати у flex-батьку.
Пам'ятайте, що цей спосіб підходить тільки якщо у батьківського контейнера вказана конкретна ширина (px,% і т.д.), тому тут у контейнера є висота.
Якщо обидва ці способи не підходять, можна використовувати прийом «елемент-привид», при якому в контейнер поміщається псевдоелемент з максимальною висотою, і текст вирівнюється по горизонталі по цьому елементу:
Блоковий елемент з фіксованою висотою.
Зазвичай коли мова йде про веб-сторінці, висота може бути невідома з багатьох причин: якщо змінюється ширина елементи, перерозподіл тексту може змінити висоту. Варіації в стилізації тексту можуть змінити висоту. Зміна кількості тексту може змінити висоту елемента. Елементи з фіксованим співвідношенням сторін, наприклад, зображення, можуть змінити висоту при масштабуванні, і так далі.
Але, якщо вам відома висота, вертикальне центрування можна зробити так:
Блоковий елемент з нефіксованим висотою
Можна центрировать, піднявши вгору на половину його висоти після того, як зрушили його наполовину вниз:
Все це можна зробити значно простіше за допомогою flexbox.
І по горизонталі, і по вертикалі
Описані вище прийоми можна комбінувати як завгодно, щоб отримати ідеально відцентрувати елементи. Але, з мого досвіду, зазвичай все зводиться до трьох варіантів:
Елемент з фіксованою висотою і шириною.
Використання відступів з негативними значеннями, рівними половині висоти і ширини елемента після того, як для нього було прописано абсолютне позиціонування в точці 50% / 50%, відцентруйте елемент всередині батька. Крім того, спосіб добре підтримується браузерами:
Елемент з нефікірованной висотою і шириною.
Якщо вам не відомі ширина або висота, для центрування можна використовувати властивість transform і негативне значення translate по 50% в обох напрямках (воно обчислюється від поточної ширини / висоти елемента):
Щоб виконати центрування в обох напрямках за допомогою flexbox, потрібно використовувати два центрирующих властивості:
