⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

So zentrieren Sie ein Div in CSS (Flexbox)

Erstellen Sie visuell ein CSS-Flexbox-Layout: Flex-Direction, Justify-Content, Align-Items, Flex-Wrap und Lücke im Container sowie Flex-Grow, Flex-Shrink und Flex-Basis pro Kind, alles mit Live-Vorschau und kopierbarem CSS.

Verarbeitung... 0%

Ergebnis

Hier ist die direkte Antwort auf die am häufigsten gestellte Frage in CSS: Um ein Div zu zentrieren, platzieren Sie display:flex, justify-content:center und align-items:center auf seinem übergeordneten Element. Das ist alles – drei Erklärungen auf dem Behälter, und das Kind sitzt in jeder Größe sowohl horizontal als auch vertikal perfekt zentriert darin. Auf dieser Seite wird der Generator mit genau dieser Kombination geöffnet, die bereits angewendet wurde. Die Vorschau unten zeigt, wie er gerade an drei nummerierten Feldern arbeitet.

Vor Flexbox waren zum Zentrieren eines Div Hacks erforderlich: margin: 0 automatisch nur horizontal zentriert und funktionierte nur bei einem Block mit fester Breite; Vertikale Zentrierung bedeutete Position: Absolut mit negativen Rändern oder einen Transformationstrick, beide waren fragil, sobald sich die Größe des Inhalts änderte. justify-content kümmert sich um die Hauptachse und align-items um die Querachse – zusammen zentrieren sie in beide Richtungen, unabhängig davon, wie groß oder breit das Kind ist, und genau deshalb wurde dieses Paar zur Standardantwort.

Ziehen Sie ein beliebiges Steuerelement unten und beobachten Sie, wie die drei Vorschaufelder zentriert bleiben, während der Container seine Form ändert, oder fügen Sie eine Lücke zwischen ihnen hinzu. Wenn es richtig aussieht, kopieren Sie den CSS-Block unten direkt in Ihr Stylesheet – er läuft in jedem modernen Browser auf die gleiche Weise, es ist keine Bibliothek erforderlich.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Container-Steuerelemente: Flex-Richtung, Justify-Content, Align-Items, Flex-Wrap und eine Lückeneingabe in Pixel, die live auf die Vorschau angewendet wird.
  • Standardmäßig drei farblich gekennzeichnete untergeordnete Felder (bis zu acht hinzufügen, bis zu zwei entfernen), jedes mit seinen eigenen Flex-Grow-, Flex-Shrink- und Flex-Basis-Feldern.
  • Kopierbarer CSS-Block mit einer .flex-container-Regel plus einer .flex-item-N-Regel pro untergeordnetem Element, die nicht standardmäßige Flex-Eigenschaften aufweist.

Wichtigste Vorteile

✓ Jedes Container-Steuerelement und jedes untergeordnete Flex-Grow-, Flex-Shrink- und Flex-Basis-Update werden in drei nummerierten Vorschauboxen live aktualisiert, sodass Sie genau sehen können, was Ihre Flexbox-Regeln bewirken, bevor Sie ein Stylesheet berühren.
✓ Der Generator druckt nur untergeordnete Regeln, die tatsächlich von den CSS-Standardeinstellungen abweichen, sodass der kopierte Code kurz und lesbar bleibt, anstatt „flex-grow: 0“ in jedem Feld erneut anzugeben.
✓ Voreingestellte Seiten lösen die Layouts, nach denen Menschen namentlich suchen: Zentrieren eines Div, einer Logo-Links-Links-Rechts-Navigationsleiste und flexible Spalten gleicher Breite – öffnen Sie eine und das Tool ist bereits konfiguriert.

Anwendungsfälle

  • • Holen Sie sich das genaue CSS, um ein Div sowohl horizontal als auch vertikal zu zentrieren, indem Sie beobachten, wie justify-content und align-items in Live-Vorschaufeldern funktionieren.
  • • Erstellen Sie ein Navigationsleistenlayout mit Logo links und Links rechts mit „space-between“ und „align-items:center“ und kopieren Sie dann das Container-CSS direkt in Ihre Header-Komponente.
  • • Vergleichen Sie „space-between“, „space-around“ und „space-equally“ nebeneinander in denselben drei Kästchen, anstatt zu raten, welches dem gewünschten Abstand entspricht.