Центрування з CSS

Веб-сторінки – це інструмент взаємодії між власниками сайту та користувачами. Мета кожної сторінки - спонукати відвідувачів виконати цільову дію: натиснути, перейти, заповнити форму. Саме тому так важливо правильно збудувати дизайн сторінки, розмістивши всі елементи максимально ефектно та естетично.

Для упорядкування елементів на веб-сторінці використовується центрування CSS (CSS center). Розглянемо основні підходи до центрування елементів, а також методи з використанням Flexbox та Grid Layout.

Спробуйте себе у Frontend-розробці

Розуміння основ центрування

Центрування елементів на веб-сторінці за допомогою CSS (CSS center) допомагає зробити інтерфейс зручнішим та візуально привабливим. Далеко не всі елементи потрібно вирівнювати саме центром: так, тексти на веб-сторінці зазвичай вирівнюють по лівому краю, оскільки читаємо ми зліва направо. Але основні елементи — іміджі, заголовки та інше — зазвичай займають центральну позицію.

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

Як вирівняти текст центром за допомогою text-align

Для центрування текстових елементів CSS використовується властивість text-align . Воно дозволяє вирівнювати текст усередині його контейнера.

.container 
text-align:
center;
>

У цьому прикладі текст усередині контейнера буде вирівняний по центру.Ця властивість корисна при створенні заголовків, кнопок та інших елементів, які містять невеликий текст (один-два рядки або кілька слів).

Цей спосіб центрування також валідний для інших внутрішньоблочних елементів.

Горизонтальне центрування з margin: auto

Горизонтальне центрування блокових елементів можна легко досягти за допомогою margin: auto . Margin – це відступ між блоковим елементом та краєм його контейнера. Якщо відступ однаковий з усіх боків, елемент буде центрований щодо контейнера. Автоматично обумовлений розмір відступу якраз і забезпечує однакові відступи з усіх боків.

.block 
width:
50%;
margin:
0
auto;
>

У цьому прикладі блоковий елемент з фіксованою шириною 50% вирівнюватиметься по центру.

Абсолютне центрування

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

.container 
position:
relative;
>
.centered

position:
absolute;
top:
50%;
left:
50%;
transform:
translate(-50%,
-50%);
>

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

Центрування з Flexbox

Flexbox — інструмент CSS для центрування та впорядкування елементів веб-сторінки як по горизонталі, так і по вертикалі. Щоб оперувати елементами, потрібно встановити атрибут flex властивості display .

Після цього до елементів усередині контейнера будуть застосовані всі можливості Flexbox , в якому є дві осі координат x і y, що дає можливість розподіляти елементи по горизонталі, і по вертикалі.

.container 
display:
flex;
justify-content:
center;
align-items:
center;
>

Цей код центрує всі дочірні елементи, як по горизонталі, так і по вертикалі.

Центрування з Grid Layout

Flexbo x чудово підходить для роботи з рядками та стовпцями. Але при використанні Flexbox може виявитися, що він некоректно відображає елементи в одному з браузерів або функціонала недостатньо для поставленого завдання. Тоді на допомогу приходить Grid Layout.

Grid Layout є ще одним інструментом для впорядкування елементів сторінки. Вибираючи між ним та Flexbox, досвідчені розробники рекомендують використовувати Grid Layout для загальної структури сторінки, а Flexbox – для центрування усередині контейнерів.

Ось як можна центрувати елементи за допомогою Grid Layout:

.container 
display:
grid;
place-items:
center;
>

Цей код повністю центрує всі дочірні елементи всередині контейнера.

Висновок

Центрування елементів за допомогою CSS (CSS center) — це важлива навичка, яку має освоїти кожен веб-розробник. Правильне центрування елементів сприяє покращенню сприйняття контенту користувачами та підвищує загальну якість веб-сторінки.

У цьому блозі ми розглянули різні методи центрування, включаючи text-align, Flexbox, Grid Layout та абсолютне позиціонування. Якщо ви бажаєте навчитися створювати привабливі та зручні веб-сторінки, зареєструйтесь на курс «Frontend-розробник» від компанії Хекслет.

Як розмістити елементи grid по центру?

Потрібно щоб чорні квадрати стали по центру, або що між ними стали однакові відступи, як це зробити?

3 відповіді 3

justify-content: center; Дивно, правда? )

.container < display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 280px)); grid-column-gap: 18px; grid-row-gap: 20px; border: 1px solid red; justify-content: center; >.children

У мене теж не працювало, а ось це запрацювало

justify-items: center;

Мені подобається більше ось так:

height: 100vh; display: grid; place-items: center;

height: 100vh; display: grid; place-content: center;

Можна задавати два значення, вирівнюючи по горизонталі чи вертикалі!

А для відступів підійде: