⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

Hvordan sentrere en Div i CSS (Flexbox)

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

Behandler... 0%

Resultat

Her er det direkte svaret på det mest stilte spørsmålet i CSS: for å sentrere en div, sett display: flex, justify-content: center og align-items: sentrer på dens overordnede. Det er det — tre erklæringer på beholderen, og barnet sitter perfekt sentrert både horisontalt og vertikalt inne i den, uansett størrelse. Denne siden åpner generatoren med akkurat den kombinasjonen som allerede er brukt, så forhåndsvisningen nedenfor viser at den fungerer på tre nummererte bokser akkurat nå.

Før flexbox trengte sentrering av en div hacks: margin: 0 auto bare sentrert horisontalt og jobbet kun på en blokk med fast bredde; vertikal sentrering betydde posisjon: absolutt med negative marginer eller et transformert triks, begge skjøre i det øyeblikket innhold endret størrelse. justify-content håndterer hovedaksen og align-items håndterer tverraksen — sammen sentrerer de i begge retninger uavhengig av hvor høyt eller bredt barnet er, og det er nettopp derfor dette paret ble standardsvaret.

Dra en kontroll nedenfor og se de tre forhåndsvisningsboksene holde seg sentrert mens beholderen endrer form, eller legg til et gap mellom dem. Når det ser riktig ut, kopierer du CSS-blokken nederst rett inn i stilarket ditt – det kjører på samme måte i alle moderne nettlesere, uten behov for bibliotek.

🛡️
Utført i nettleser

Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.

Godkjente formater og regler

  • Beholderkontroller: flex-direction, justify-content, align-items, flex-wrap og en gap-inngang i piksler, brukt live på forhåndsvisningen.
  • Tre fargekodede barnebokser som standard (legg til opptil åtte, fjern ned til to), hver med sine egne felt for flex-grow, flex-shrink og flex-basis.
  • Kopierbar CSS-blokk med en .flex-container-regel pluss én .flex-item-N-regel per barn som har ikke-standard flex-egenskaper.

Viktige fordeler

✓ Hver beholderkontroll og hvert barns flex-grow, flex-shrink og flex-basis oppdaterer tre nummererte forhåndsvisningsbokser live, slik at du ser nøyaktig hva flexbox-reglene dine gjør før du berører et stilark.
✓ Generatoren skriver bare ut underordnede regler som faktisk avviker fra CSS-standardene, så den kopierte koden forblir kort og lesbar i stedet for å gjenta flex-grow: 0 på hver boks.
✓ Forhåndsinnstilte sider løser oppsettene folk søker etter ved navn: sentrering av en div, en logo-venstre lenker-høyre navigasjonslinje og fleksible kolonner med lik bredde – åpne en og verktøyet er allerede konfigurert.

Brukssaker

  • • Få den nøyaktige CSS-en for å sentrere en div både horisontalt og vertikalt ved å se justify-content og align-elementer arbeide på live forhåndsvisningsbokser.
  • • Bygg en logo-venstre, lenker-høyre navigasjonslinje-layout med mellomrom-mellom og juster-elementer: senter, og kopier deretter beholderens CSS rett inn i overskriftskomponenten.
  • • Sammenlign mellomrom, mellomrom rundt og jevnt mellomrom side om side på de samme tre boksene i stedet for å gjette hvilken som samsvarer med avstanden du ønsker.