⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

Hur man centrerar en Div i CSS (Flexbox)

Bygg en CSS-flexbox-layout visuellt: flex-direction, justify-content, align-items, flex-wrap och gap på behållaren, plus per-child flex-grow, flex-shrink och flex-bas, allt med en liveförhandsvisning och kopierbar CSS.

Bearbetar... 0%

Resultat

Här är det direkta svaret på den mest ställda frågan i CSS: för att centrera en div, lägg display: flex, justify-content: center och align-items: centrera på dess överordnade. Det är det — tre deklarationer på behållaren, och barnet sitter perfekt centrerat både horisontellt och vertikalt inuti den, oavsett storlek. Den här sidan öppnar generatorn med exakt den kombinationen redan tillämpad, så förhandsgranskningen nedan visar att den fungerar på tre numrerade rutor just nu.

Innan flexbox behövde centrering av en div hacks: marginal: 0 auto endast centrerad horisontellt och arbetade endast på ett block med fast bredd; vertikal centrering betydde position: absolut med negativa marginaler eller ett transformeringstrick, båda ömtåliga i det ögonblick innehållet ändrade storlek. justify-content hanterar huvudaxeln och align-items hanterar tväraxeln — tillsammans centreras de i båda riktningarna oavsett hur lång eller bred barnet är, vilket är exakt varför detta par blev standardsvaret.

Dra valfri kontroll nedan och se de tre förhandsgranskningsrutorna förbli centrerade när behållaren ändrar form, eller lägg till ett mellanrum mellan dem. När det ser rätt ut, kopiera CSS-blocket längst ner rakt in i din stilmall – det körs på samma sätt i alla moderna webbläsare, inget bibliotek behövs.

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Behållarkontroller: flex-direction, justify-content, align-items, flex-wrap och en luckinmatning i pixlar, tillämpas live på förhandsgranskningen.
  • Tre färgkodade underordnade rutor som standard (lägg till upp till åtta, ta bort ner till två), var och en med sina egna flex-grow, flex-shrink och flex-bas.
  • Kopierbart CSS-block med en .flex-container-regel plus en .flex-item-N-regel per barn som har flexegenskaper som inte är standard.

Viktiga fördelar

✓ Varje containerkontroll och varje barns flex-grow, flex-shrink och flex-bas uppdaterar tre numrerade förhandsgranskningsrutor live, så att du ser exakt vad dina flexbox-regler gör innan du rör en stilmall.
✓ Generatorn skriver bara ut underordnade regler som faktiskt skiljer sig från CSS-standarderna, så den kopierade koden förblir kort och läsbar istället för att återställa flex-grow: 0 på varje ruta.
✓ Förinställda sidor löser layouterna som folk söker efter med namn: centrera en div, en logotyp-vänster länkar-höger navigeringsfält och lika breda flexibla kolumner – öppna en och verktyget är redan konfigurerat.

Användningsfall

  • • Skaffa exakt CSS för att centrera en div både horisontellt och vertikalt genom att se justify-content och align-items arbeta i liveförhandsgranskningsrutor.
  • • Bygg en logotyp-vänster, länk-höger navigeringsfältslayout med mellanslag-mellan och align-objekt: centrera, kopiera sedan behållarens CSS direkt in i din rubrikkomponent.
  • • Jämför mellanrum-mellan, mellanrum runt och mellanrum-jämnt sida vid sida på samma tre rutor istället för att gissa vilken som matchar avståndet du vill ha.