⭐ 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 само центрирано хоризонтално и работеше само върху блок с фиксирана ширина; вертикалното центриране означаваше позиция: абсолютна с отрицателни граници или трик за трансформация, и двете крехки в момента, в който съдържанието промени размера. justify-content handles the main axis and align-items handles the cross axis — together they center in both directions regardless of how tall or wide the child is, which is exactly why this pair became the standard answer.

Плъзнете която и да е контрола по-долу и гледайте как трите полета за визуализация остават центрирани, докато контейнерът променя формата си, или добавете празнина между тях. When it looks right, copy the CSS block at the bottom straight into your stylesheet — it runs the same way in every modern browser, no library needed.

🛡️
Изпълнява се в браузъра

Вашите файлове и данни никога не напускат това устройство. Обработката се извършва изцяло офлайн. 100% сигурно.

Приети формати и правила

  • Контроли на контейнера: flex-direction, justify-content, align-items, flex-wrap и въвеждане на пропуски в пиксели, приложени на живо към визуализацията.
  • Три цветно кодирани дъщерни кутии по подразбиране (добавете до осем, премахнете до две), всяка със собствени полета за гъвкаво нарастване, гъвкаво свиване и гъвкава основа.
  • Копируем 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 върху полетата за визуализация на живо.
  • • Изградете оформление на навигационната лента с лого вляво, връзки вдясно с интервал между и подравняване на елементи: център, след което копирайте CSS контейнера направо в компонента на заглавката.
  • • Сравнете разстоянието между, разстоянието наоколо и равномерното пространство една до друга на едни и същи три кутии, вместо да гадаете коя отговаря на желаното от вас разстояние.