Сім найшвидших способів вирівняти div за допомогою CSS

Привіт і ласкаво просимо до цього посібника з CSS. У цьому туторіалі я покажу вам сім найшвидших способів вирівняти ваш div за допомогою CSS, з перевагами та недоліками кожного методу. Готові? Давайте розглянемо.

Метод 1: Flex Layout

Перший і найпростіший метод — це використання flex layout. Просто додайте display: flex, justify-content: center для горизонтального вирівнювання і align-items: center для вертикального вирівнювання.

Centered with Flexbox

.flex-container {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100vh;  
  background-color: #f0f0f0;  
}  
.box {  
  background-color: #4caf50;  
  color: white;  
  padding: 20px;  
  font-size: 20px;  
}  

Перевага flex display полягає в тому, що вам не потрібно вказувати ширину та висоту div. Наприклад, ось div, який містить лише текст без зазначення ширини та висоти. Flex layout — це найшвидший спосіб центрування кількох елементів в одному div.

[ ## Прочитайте це перед початком вашої кар'єри в програмуванні! Кращі поради для програмістів

Кращі поради для новачків, які починають свою кар'єру в програмуванні у 2025 році! Дізнайтеся, як ставити чіткі цілі, уникати оманливих тенденцій…

pixicstudio.medium.com ](/read-this-before-you-start-your-career-in-coding-best-tips-for-coders-451b167bb15b?source=post_page-----d9d2fdde8fac--------------------------------)

Метод 2: Margin: Auto

Другий метод — використання margin: auto. Це швидке рішення і дуже популярне, але має багато обмежень:

• Ми можемо використовувати це тільки для елементів з визначеною шириною.
• Елемент повинен мати блочний або таблицевий display і не повинен мати позицію fixed або absolute.
• Також ми не можемо використовувати його для вертикального вирівнювання.

Centered with Margin: Auto

.box {  
  width: 200px;  
  height: 100px;  
  margin: auto;  
  background-color: #2196f3;  
  color: white;  
  text-align: center;  
  line-height: 100px;  
}  

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

Метод 3: Inline Block Display

Третій метод — це комбінація text-align і inline-block. Просто додайте text-align: center до батьківського div і встановіть display дочірнього div на inline-block. Це змусить наш div поводитись як інлайн-елемент і, відповідно, підпорядковуватися text-align: center.

Centered with Inline Block

.container {  
  text-align: center;  
  height: 100vh;  
  background-color: #f0f0f0;  
}  
.box {  
  display: inline-block;  
  background-color: #ff9800;  
  color: white;  
  padding: 20px;  
  font-size: 20px;  
}  

Різниця між цим методом і margin: auto в тому, що нам не потрібно вказувати ширину, але все одно ви не зможете використовувати його для вертикального вирівнювання.

[ ## Майбутнє вже тут: Топ-8 найцікавіших технічних трендів 2025 року

Дізнайтеся про 8 найбільших технологічних трендів, що з'являться у 2025 році. Від ШІ до квантових обчислень, дізнайтесь, що за нові технології…

pixicstudio.medium.com ](/top-8-most-exciting-tech-trends-in-2025-f648917f4be3?source=post_page-----d9d2fdde8fac--------------------------------)

Метод 4: 2D Transform

Четвертий метод — це використання 2D transform. Спочатку встановіть позицію елемента на absolute, потім задайте top і left рівними 50%. Це перемістить div в центр екрану.
Тепер додайте translate(-50%, -50%) для обох осей X і Y, щоб компенсувати розмір елемента.

Centered with 2D Transform

.container {  
  position: relative;  
  height: 100vh;  
  background-color: #f0f0f0;  
}  
.box {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  background-color: #e91e63;  
  color: white;  
  padding: 20px;  
  font-size: 20px;  
}  

Div завжди буде перебувати в центрі екрану і ігноруватиме всі інші елементи. Це дуже корисно, якщо ви хочете накласти ваш div на інші елементи. Однак для цього вам потрібно визначити ширину та висоту.

[ ## Чи стає програмування непотрібним? 8 правил для навчання коду в 2025 році

Деякі люди на 100% впевнені, що більше немає потреби вивчати програмування. ШІ скоро все це замінить, тож…

pixicstudio.medium.com ](/is-coding-becoming-irrelevant-8-rules-to-learn-code-in-2025-321faf925dd7?source=post_page-----d9d2fdde8fac--------------------------------)

Метод 5: Grid Layout

CSS Grid також можна використовувати для ефективного центрування елементів.
- Додайте display: grid до батьківського контейнера.
- Використовуйте place-items: center для центрування, як по горизонталі, так і по вертикалі.

.parent {  
  display: grid;  
  place-items: center;  
}  

Переваги:
- Не потрібно вказувати ширину та висоту.
- Добре працює для центрування кількох елементів.

Недоліки:
- Потрібна підтримка сучасних браузерів (хоча зараз вона є майже у всіх).

Метод 6: Table Display

Використання display: table і display: table-cell — це старіший метод, але він все ще працює:
- Встановіть батьківський елемент на display: table.
- Встановіть дочірній елемент на display: table-cell і використовуйте vertical-align: middle.
Використовуйте text-align: center для горизонтального вирівнювання.

.parent {  
  display: table;  
  width: 100%;  
  height: 100%;  
}  
.child {  
  display: table-cell;  
  text-align: center;  
  vertical-align: middle;  
}  

Метод 7: Position Relative + Transform

Це варіація методу absolute + transform:
- Встановіть батьківський контейнер на position: relative.
- Встановіть дочірній елемент на absolute і центрируйте його за допомогою top: 50%, left: 50%, і translate(-50%, -50%).

Centered with Position Relative + Transform   

.relative-container {  
  position: relative;  
  width: 400px;  
  height: 300px;  
  margin: 50px auto;  
  background-color: #f0f0f0;  
  border: 2px solid #ccc;  
}  
.absolute-child {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  background-color: #673ab7;  
  color: white;  
  padding: 20px;  
  font-size: 18px;  
  text-align: center;  
}  

Цей метод є дещо більш контрольованим при роботі з вкладеними елементами.

[ ## 5 найкращих UI бібліотек, що трендують, для покращення вашого веб-дизайну у 2025 році

У цьому списку я поділюсь п’ятіркою найкращих UI бібліотек, які вам сподобаються. Що ж, що... Теговано з…

dev.to ](https://dev.to/webdev-usman/5-must-try-trending-ui-component-libraries-to-enhance-your-web-design-in-2025-3k1c?source=postpage-----d9d2fdde8fac--------------------------------)

Висновок

Ось і все для цього посібника. Якщо вам сподобався цей туторіал, не забудьте аплодувати та підписатися, щоб підтримати мене і бути в курсі наступного оновлення.

Дякую за те, що прочитали до кінця, і до зустрічі наступного разу. Па-па!

Розгляньте можливість підписатися на мене на інших соціальних платформах!

LinkedIn | Bluesky | Dev.to

[ ## Flutter vs React Native: Який фреймворк кращий для мобільних додатків?

Сьогодні Flutter і React Native є провідними кроссплатформеними фреймворками для додатків, і їх...

Теговано з…

dev.to

](https://dev.to/webdev-usman/flutter-vs-react-native-which-framework-is-better-for-mobile-apps-4pk9?source=postpage-----d9d2fdde8fac--------------------------------)

Перекладено з: Seven quickest ways to center your div using CSS