⭐ 0
🔍
Текст Зображення PDF та Документи Аудіо Музика Електросхемотехніка Час Корисні утиліти Валідатори Езотерика Ігри

Як центрувати div у CSS (Flexbox)

Візуальний конструктор макета CSS flexbox: flex-direction, justify-content, align-items, flex-wrap і gap контейнера, а також flex-grow, flex-shrink і flex-basis кожного дочірнього елемента — з живим прев'ю і готовим до копіювання CSS.

Опрацювання... 0%

Результат

Ось пряма відповідь на найпопулярніше запитання в CSS: щоб центрувати div, додайте display: flex, justify-content: center і align-items: center на його батьківський елемент. Все — три декларації на контейнері, і дочірній елемент лягає точно по центру і горизонтально, і вертикально, незалежно від розміру. Ця сторінка відкриває генератор саме з такою комбінацією, тож прев'ю нижче вже показує це наживо на трьох пронумерованих блоках.

До flexbox центрування div потребувало хитрощів: margin: 0 auto центрував лише горизонтально і лише для блоку фіксованої ширини; вертикальне центрування означало position: absolute з від'ємними полями або трюк із transform — обидва крихкі, щойно змінювався розмір вмісту. justify-content керує головною віссю, а align-items — поперечною: разом вони центрують в обох напрямках незалежно від висоти чи ширини дочірнього елемента, тому саме ця пара стала стандартною відповіддю.

Посуньте будь-який контроль нижче і подивіться, як три прев'ю-блоки лишаються по центру, поки контейнер змінює форму, або додайте між ними gap. Коли вигляд влаштовує, скопіюйте блок CSS знизу просто у ваш стиль — він однаково працює в кожному сучасному браузері, без жодної бібліотеки.

🛡️
Локальна безпека (Browser)

Дані не залишають ваш пристрій. Конвертація відбувається на клієнті в межах браузера. Безпека гарантована.

Нюанси та Формати

  • Контроли контейнера: flex-direction, justify-content, align-items, flex-wrap і поле gap у пікселях, застосовані до прев'ю наживо.
  • Три кольорові дочірні блоки за замовчуванням (додайте до восьми, приберіть до двох), кожен зі своїми полями flex-grow, flex-shrink і flex-basis.
  • Готовий до копіювання блок CSS: правило .flex-container плюс по одному правилу .flex-item-N для кожного елемента з нетиповими flex-властивостями.

Наші переваги

✓ Кожен контроль контейнера і кожні flex-grow, flex-shrink та flex-basis дочірнього елемента миттєво оновлюють три пронумеровані прев'ю-блоки, тож ви бачите результат ваших flexbox-правил ще до того, як торкнетесь стилів.
✓ Генератор друкує лише ті правила дочірніх елементів, які справді відрізняються від типових значень CSS, тож скопійований код лишається коротким і читабельним, а не повторює flex-grow: 0 для кожного блоку.
✓ Пресет-сторінки одразу відкривають макети, які люди шукають за назвою: центрування div, навбар із логотипом зліва й посиланнями справа та рівні за шириною гнучкі колонки — відкрийте будь-яку, і тул уже налаштований.

Сценарії використання

  • • Отримайте точний CSS для центрування div і горизонтально, і вертикально, спостерігаючи, як justify-content і align-items працюють на живих прев'ю-блоках.
  • • Зберіть навбар «логотип зліва, посилання справа» через space-between і align-items: center, а тоді скопіюйте CSS контейнера просто у ваш компонент хедера.
  • • Порівняйте space-between, space-around і space-evenly поруч на тих самих трьох блоках замість того, щоб вгадувати, який відповідає потрібним проміжкам.