Як відцентрувати div за допомогою CSS (Flexbox)
Побудуйте flexbox-макет наочно: flex-direction, justify-content, align-items, flex-wrap і gap для контейнера, а також flex-grow, flex-shrink і flex-basis для кожного дочірнього елемента — усе з живим попереднім переглядом і готовим до копіювання CSS.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ось пряма відповідь на найпоширеніше запитання в CSS: щоб відцентрувати div, задайте для його батьківського елемента display: flex, justify-content: center і align-items: center. Це все — три оголошення для контейнера, і дочірній блок опиняється ідеально відцентрованим по горизонталі та вертикалі всередині нього, за будь-якого розміру. Ця сторінка відкриває генератор із уже застосованою саме цією комбінацією, тож попередній перегляд нижче прямо зараз показує, як вона працює на трьох пронумерованих блоках.
До появи flexbox центрування div потребувало хитрощів: margin: 0 auto центрувало лише по горизонталі й працювало тільки для блоків із фіксованою шириною; вертикальне центрування означало position: absolute із відʼємними відступами або трюк із transform — обидва способи були крихкими, щойно вміст змінював розмір. justify-content керує головною віссю, а align-items — поперечною; разом вони центрують в обох напрямках незалежно від висоти чи ширини дочірнього елемента — саме тому ця пара стала стандартною відповіддю.
Потягніть будь-який елемент керування нижче й дивіться, як три блоки попереднього перегляду залишаються відцентрованими, коли контейнер змінює форму, або додайте між ними проміжок. Коли вигляд вас влаштовує, скопіюйте блок CSS унизу прямо до своєї таблиці стилів — він працює однаково в усіх сучасних браузерах, без жодних бібліотек.