Kako centrirati Div u CSS-u (Flexbox)
Izgradite CSS flexbox raspored vizualno: flex-direction, justify-content, align-items, flex-wrap i gap na spremniku, plus flex-grow, flex-shrink i flex-basis po djetetu, sve s pregledom uživo i CSS-om koji se može kopirati.
Rezultat
Ovdje je izravan odgovor na najčešće postavljano pitanje u CSS-u: da biste centrirali div, stavite display: flex, justify-content: center i align-items: center na njegovog roditelja. To je to — tri deklaracije na spremniku, a dijete sjedi savršeno centrirano i vodoravno i okomito unutar njega, bilo koje veličine. Ova stranica otvara generator s točno tom kombinacijom koja je već primijenjena, tako da pregled u nastavku pokazuje da trenutno radi na tri numerirana polja.
Prije flexboxa, centriranje diva zahtijevalo je hakove: margin: 0 auto samo horizontalno centriran i radio je samo na bloku fiksne širine; okomito centriranje značilo je položaj: apsolutni s negativnim marginama ili trik transformacije, oboje krhko u trenutku kada sadržaj promijeni veličinu. justify-content upravlja glavnom osi, a align-items upravlja poprečnom osi — zajedno se centriraju u oba smjera bez obzira na to koliko je dijete visoko ili široko, što je upravo razlog zašto je ovaj par postao standardni odgovor.
Povucite bilo koju kontrolu ispod i gledajte kako tri okvira za pregled ostaju centrirana dok spremnik mijenja oblik ili dodajte razmak između njih. Kada izgleda kako treba, kopirajte CSS blok na dnu ravno u svoju tablicu stilova — radi na isti način u svakom modernom pregledniku, nije potrebna biblioteka.