Вирівнювання по центру в CSS
Вирівнювання елементів центру в CSS - це одна з найпопулярніших причин, щоб поскаржитися на CSS. «Чому все так складно? - обурюються вони. Мені здається, що проблема полягає не в тому, що це важко зробити, а в тому, що способів для вирівнювання елементів по центру дуже багато і буває досить складно вибрати з них відповідний.
Давайте вибудуємо всі можливі рішення у вигляді деревоподібної схеми і сподіватимемося, що це спростить наше завдання.
Отже, мені потрібно вирівняти елемент центром.
Горизонтальне вирівнювання
Вирівнювання по центру рядкового або рядково-* елемента
Вирівнювати по центру рядкові елементи всередині батьківського блокового блоку можна досить просто:
Це буде працювати для inline, inline-block, inline-table, inline-flex, і т.д. буд.
Вирівнювання по центру блокового елемента
Вирівняти по центру блоковий елемент ви можете встановивши властивостями margin-left та margin-right значення auto (у нього також має бути задана ширина, інакше елемент просто займе всю ширину контенту і не буде потреби у вирівнюванні). Найчастіше це робиться за допомогою скороченої властивості, ось так:
Це буде працювати незалежно від того, яка ширина встановлена у блокового елемента або його батька.
Зверніть увагу, що ви не зможете обтікати елемент, вирівняний по центру таким способом. Однак і для цього є трюк.
Вирівнювання по центру кількох блокових елементів
Якщо є два або більше блокових елементів, які потрібно вирівняти горизонтально по центру в межах одного рядка, то можливо вам краще змінити їх тип відображення.Нижче наведено приклад зміни їхнього типу відображення на inline-block та приклад з Flexbox:
Якщо ці кілька блоків розташовані на різних рядках, то техніка з автоматичними відступами, як і раніше, прекрасна:
Вертикальне вирівнювання
Вертикальне вирівнювання по центру CSS трохи складніше.
Вирівнювання по центру рядкового або рядково-* елемента
Вирівнювання елемента з одним рядком
Іноді рядкові/текстові елементи можуть вирівнюватися по центру просто тому що вони мають однакове значення для властивостей padding-top і padding-bottom .
Якщо вам з якихось причин padding - це не варіант, а ви намагаєтеся вирівняти по центру певний текст і точно знаєте, що він не буде обернутий чимось ще, тобто невеликий трюк, суть якого полягає в тому, щоб встановити властивість line-height рівним значенню висоти елемента.
Вирівнювання багаторядкового елемента
Однакові відступи зверху і знизу можуть створити ефект вирівнювання по центру і для багаторядкових елементів, але якщо це не спрацює, то можливо, що елемент, в якому знаходиться текст, є коміркою таблиці, або така його поведінка явно задана за допомогою CSS. В даному властивість vertical-align обробляє це, на відміну від того, що воно зазвичай обробляє вирівнювання елементів усередині рядка.
Якщо це щось схоже на таблицю, можливо, ви зможете використовувати Flexbox ? Окремий Flex-елемент може бути легко розташований центром всередині Flex-контейнера.
.flex-center-vertically
Пам'ятайте, що це насправді актуально, коли у контейнера є фіксована висота (px, %, та інші), ось чому тут у контейнера задана висота.
Якщо обидві техніки наведені вище не можна застосувати, ви можете використовувати техніку «примарного елемента», в якій псевдоелемент з висотою 100% розміщується всередині контейнера і вирівнюється вертикально по центру нього.
.ghost-center < position: relative; >.ghost-center::before < content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; >.ghost-center p
Вирівнювання по центру блокового елемента
Вирівнювання елемента із відомою висотою
Досить часто ми не можемо знати висоту з багатьох причин: якщо змінюється ширина, текст може форматуватися і змінювати висоту. Різна стилізація тексту може змінювати висоту. Різний розмір шрифту може змінити висоту. Елементи з фіксованим співвідношенням сторін, такі як зображення можуть змінювати висоту при зміні власних розмірів і т.д.
Але якщо ви знаєте висоту елемента, то можете вирівнювати по центру так:
Вирівнювання елемента з невідомою висотою
Навіть якщо ви не знаєте висоту елемента, його все ще можна проштовхнути на 50% висоти його батька, а потім підняти на 50% його висоти:
Вирівнювання елемента за допомогою Flexbox
Невеликий сюрприз це можна дуже просто зробити за допомогою Flexbox.
Горизонтальне та вертикальне вирівнювання
Ви можете комбінувати представлені вище техніки, щоб отримати ідеально вирівняні по центру елементи. Але зазвичай їх можна поділити на 4 групи:
Вирівнювання елемента з фіксованою шириною та висотою
Використання негативних відступів (maring) рівних половині цієї ширини та висоти після абсолютного позиціонування елемента 50%/50% вирівнюють елемент по центру. У цього способу досить хороша кросбраузерна підтримка:
Вирівнювання елемента з невідомою шириною та висотою
Якщо ви не знаєте ширину або висоту елемента, то можете використовувати властивість transform і негативний translate в 50% в обох напрямках (залежно від поточної ширини/висоти елемента) до центру:
Вирівнювання елемента за допомогою Flexbox
Щоб вирівняти елемент по центру за допомогою Flexbox, вам потрібно використовувати дві властивості центрування:
Вирівнювання елемента за допомогою CSS Grid
Це просто невеликий трюк (присланий Lance Janssen), який більшою мірою працюватиме для одного елемента:
Висновок
Тепер ви можете все що завгодно вирівняти по центру CSS.
Як вирівняти блок по центру - повний посібник із центрування DIV-елемента
Сьогоднішня стаття спрямована на те, щоб показати, як за допомогою кількох CSS-трюків вирівняти div центром, як по горизонталі, так і по вертикалі. Також ми розповімо, як провести центрування по всій сторінці або в окремому div-елементі.
Оновлено: 2024-10-12 13:11:38 Валентин Сейїдов автор матеріалу
Просте центрування DIV-елемента на сторінці
Цей спосіб буде добре працювати у всіх браузерах.
Значення auto як margin встановлює лівий і правий відступ на весь простір, доступний на сторінці. Тут важливо запам'ятати, що у div-елемента, що центрується, обов'язково має бути встановлено значення width .
DIV усередині DIV-елемента старим способом
Цей метод div вирівнювання по центру працюватиме у всіх браузерах.
Зовнішній div може бути поміщений як завгодно, але у внутрішнього блоку div обов'язково має бути вказана ширина (width).
Властивість display: block у CSS робить елемент блоковим, що займає всю доступну ширину.
DIV всередині DIV-елемента за допомогою inline-block
У цьому методі центрування div усередині div необов'язково вказувати ширину внутрішнього елемента. Він буде працювати у всіх сучасних браузерах, включаючи IE8.
Властивість text-align працює лише в inline-елементах. Значення inline-block дозволяє відобразити внутрішній div як inline-елемент , а також як блок ( inline-block ). Властивість text-align у зовнішньому div-елементі дозволить нам центрувати внутрішній div.
DIV всередині DIV-елемента горизонтально та вертикально
Тут для центрування div центром сторінки використовується margin: auto . Приклад працюватиме у всіх сучасних браузерах.
У внутрішнього div-елемента повинна бути вказана ширина (width) та висота (height). Метод не спрацює, якщо зовнішній div-елемент має фіксовану висоту.
Властивість CSS margin auto центрує елемент на сторінці.
DIV по нижньому кордоні сторінки
Тут для розташування div центром по вертикалі використовується margin: auto і абсолютне позиціонування для зовнішнього елемента. Метод працюватиме у всіх сучасних браузерах.
У внутрішнього div має бути встановлена ширина. Простір унизу сторінки регулюється за допомогою властивості bottom зовнішнього div. Ви також можете центрувати div по верхній межі сторінки, замінивши властивість bottom на top .
DIV на сторінці вертикально та горизонтально
Тут, щоб вирівняти div центром, знову використовується margin: auto і абсолютне позиціонування зовнішнього div . Метод працюватиме у всіх сучасних браузерах.
У div-елемента повинна бути встановлена ширина (width) і висота (height).
Робимо адаптивне центрування DIV-елемента на сторінці
Тут для вирівнювання div по центру засобами CSS ми робимо ширину div-елемента адаптивною, щоб вона реагувала зміни розмірів вікна.Цей метод працює у всіх браузерах.
У центрованого div-елемента має бути встановлена властивість max-width.
DIV всередині елемента за допомогою властивостей внутрішнього блоку
Внутрішній div-елемент тут адаптивний. Цей метод розташування div всередині div по центру працюватиме у всіх браузерах.
У внутрішнього div має бути встановлена властивість max-width.
Два адаптивні div-елементи поруч один з одним
Тут у нас два розташовані поруч адаптивні div-елементи. Цей метод встановлення div по центру екрану буде працювати у всіх сучасних браузерах.
. container < text-align: center; >.left-div < display: inline-block; max-width: 300px; vertical-align: top; >.right-div < display: inline-block; max-width: 150px; >screen and (max-width: 600px) < .left-div, .right-div < lef max-width: 100%; >>
Тут у нас кілька елементів із застосованою властивістю inline-block, розташованих усередині центрованого контейнера. У цьому прикладі також використовуються медіа-запити CSS; тобто, якщо розмір екрану менше 600 пікселів, то властивість max-width як лівого, так правого div-елемента встановлюється на 100%.
DIV-елемент, центрований за допомогою Flexbox
Тут ми маємо CSS div по центру за допомогою Flexbox. Він призначений для того, щоб полегшити процес розробки дизайну інтерфейсів користувача. Цей модуль підтримується Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ та Android Browser 40+.
Значення властивості height може бути будь-яким, але тільки більшим за розмір центрованого div-елемента.
Валентин Сейїдов автор-перекладач статті « The Complete Guide to Centering A Div »
Як вирівняти блок (div) по центру – всі популярні способи вирівнювання
Детальний посібник із центрування елементів на сторінці.
У цій статті розглянемо, як відцентрувати блок горизонтальної та вертикальної осі.
Горизонтальне центрування
Перший спосіб
Перший варіант найпростіший - просто додайте вашому блоку властивість text-align: center;
⚠️ Недолік цього методу в тому, що тепер весь контент усередині цього блоку центруватиметься по центру:
Весь текст у блоці тепер центром
Таким чином, цей спосіб підійде для конкретного рядка (наприклад для h2, h3 і тд). Але для центрування блоку це поганий варіант.
Другий спосіб
Теж досить простий спосіб. Використовуємо display: flex;
Наприклад, хочемо вирівняти один блок (заголовок h1):
⚠️ Важливо, якщо ви хочете додати кілька блоків всередині елемента з класом .myblock, потрібно трохи змінити css.
Заголовок
Невеликий текст
Тут ми додали блок із класом width-1-2, щоб продемонструвати, як працює центрування для блоків із заданою шириною.
Нам довелося додати css властивість flex-direction: column, щоб змінити основну вісь (була горизонтальна, стала вертикальна) і розмістити блоки один над одним. І якщо ми змінили вісь, то тепер нам потрібно використовувати align-items:center, щоб розмістити блок по центру.
Як бачите, блоки розміщені в центрі, при цьому, на відміну від text-align: center; текст всередині div не центрований.
Як розмістити картинку по центру блоку, ви можете дізнатись у цій статті.
Вертикальне центрування
Тут все трохи цікавіше, але так само при цьому просто і зрозуміло.
