⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

Sådan centreres en Div i CSS (Flexbox)

Byg et CSS flexbox-layout visuelt: flex-direction, justify-content, align-items, flex-wrap og gap på containeren, plus per-child flex-grow, flex-shrink og flex-basis, alt sammen med en live forhåndsvisning og kopierbar CSS.

Behandler... 0%

Resultat

Her er det direkte svar på det mest stillede spørgsmål i CSS: for at centrere en div skal du sætte display: flex, justify-content: center og align-items: centrer på dens overordnede. Det er det — tre erklæringer på beholderen, og barnet sidder perfekt centreret både vandret og lodret inde i den, uanset størrelse. Denne side åbner generatoren med præcis den kombination, der allerede er anvendt, så forhåndsvisningen nedenfor viser, at den fungerer på tre nummererede felter lige nu.

Før flexbox krævede centrering af en div hacks: margin: 0 auto kun centreret vandret og arbejdede kun på en blok med fast bredde; lodret centrering betød position: absolut med negative marginer eller et transformeringstrick, begge skrøbelige i det øjeblik, indholdet ændrede størrelse. justify-content håndterer hovedaksen og align-items håndterer tværaksen - sammen centreres de i begge retninger uanset hvor højt eller bredt barnet er, hvilket er præcis grunden til, at dette par blev standardsvaret.

Træk en hvilken som helst kontrol nedenfor, og se de tre forhåndsvisningsbokse forblive centreret, mens beholderen ændrer form, eller tilføj et mellemrum mellem dem. Når det ser rigtigt ud, skal du kopiere CSS-blokken nederst direkte ind i dit stylesheet - det kører på samme måde i alle moderne browsere, uden behov for bibliotek.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Beholderkontroller: flex-direction, justify-content, align-items, flex-wrap og en gap-input i pixels, anvendt live på forhåndsvisningen.
  • Tre farvekodede underordnede bokse som standard (tilføj op til otte, fjern ned til to), hver med sine egne flex-grow, flex-shrink og flex-basis felter.
  • Kopierbar CSS-blok med en .flex-container-regel plus én .flex-item-N-regel pr. barn, der har ikke-standard flex-egenskaber.

Vigtige fordele

✓ Hver containerkontrol og ethvert barns flex-grow, flex-shrink og flex-basis opdaterer tre nummererede forhåndsvisningsbokse live, så du kan se præcis, hvad dine flexbox-regler gør, før du trykker på et stylesheet.
✓ Generatoren udskriver kun underordnede regler, der faktisk afviger fra CSS-standarderne, så den kopierede kode forbliver kort og læsbar i stedet for at gentage flex-grow: 0 på hver boks.
✓ Forudindstillede sider løser de layouts, folk søger efter ved navn: centrering af en div, en logo-venstre links-højre navigeringslinje og fleksible kolonner i samme bredde - åbn en, og værktøjet er allerede konfigureret.

Brug Cases

  • • Få den nøjagtige CSS til at centrere en div både vandret og lodret ved at se justify-content og align-items arbejde på live forhåndsvisningsbokse.
  • • Byg et logo-venstre, links-højre navbar-layout med mellemrum-mellem og align-elementer: centreret, og kopier derefter container-CSS direkte ind i din header-komponent.
  • • Sammenlign mellemrum-mellem, mellemrum-omkring og mellemrum-jævnt side om side på de samme tre kasser i stedet for at gætte, hvilken der matcher den mellemrum, du ønsker.