Centriranje stvari jedan je od najtežih aspekata CSS-a.
Same metode obično nije teško razumjeti. Umjesto toga, to je više zbog činjenice da postoji toliko mnogo načina za centriranje stvari.
Način koji upotrebljavate može se razlikovati ovisno o HTML elementu koji želite centrirati ili o tome hoćete li ga centrirati vodoravno ili okomito.
U ovom ćemo uputstvu razmotriti kako centrirati različite elemente vodoravno, okomito i okomito i vodoravno.
Kako vodoravno centrirati
Centriranje elemenata vodoravno je obično lakše od vertikalnog centriranja. Evo nekoliko uobičajenih elemenata koje biste htjeli centrirati vodoravno i različitih načina za to.
Kako centrirati tekst pomoću CSS svojstva središnjeg poravnanja teksta
Za horizontalno centriranje teksta ili veza jednostavno upotrijebite text-alignsvojstvo s vrijednošću center:
Hello, (centered) World!
p { text-align: center; }
Kako centrirati Div pomoću CSS Margin Auto
Koristite skraćeno marginsvojstvo s vrijednošću 0 autoza centriranje elemenata na razini bloka poput divvodoravno:
.child { ... margin: 0 auto; }
Kako vodoravno centrirati div s Flexboxom
Flexbox je najmoderniji način centriranja stvari na stranici i čini dizajniranje responzivnih izgleda mnogo jednostavnijim nego što je to bilo nekada. Međutim, nije u potpunosti podržan u nekim naslijeđenim preglednicima kao što je Internet Explorer.
Da biste element centrirali vodoravno s Flexboxom, samo primijenite display: flexi justify-content: centerna nadređeni element:
.container { ... display: flex; justify-content: center; }
Kako se centrira okomito
Centriranje elemenata okomito bez modernih metoda poput Flexboxa može biti pravi posao. Ovdje ćemo razmotriti neke starije metode za prvo centriranje stvari, a zatim ćemo vam pokazati kako to učiniti s Flexboxom.
Kako centrirati div vertikalno s CSS apsolutnim pozicioniranjem i negativnim marginama
Dugo je ovo bio način da se stvari centriraju okomito. Za ovu metodu morate znati visinu elementa koji želite centrirati.
Prvo postavite displaysvojstvo nadređenog elementa na relative.
Zatim za podređeni element postavite displaysvojstvo na absolutei topna 50%:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }
Ali to zapravo samo okomito centrira gornji rub podređenog elementa.
Da biste doista centrirali podređeni element, postavite margin-topsvojstvo na -(half the child element's height):
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }
Kako vertikalno centrirati Div pomoću Transform and Translate
Ako ne znate visinu elementa koji želite centrirati (ili čak i ako znate), ova je metoda izvrstan trik.
Ova je metoda vrlo slična gornjoj metodi negativnih marži. Postavite displaysvojstvo nadređenog elementa na relative.
Za podređeni element postavite displaysvojstvo na absolutei postavite topna 50%. Sada, umjesto da koristite negativnu marginu za istinsko centriranje podređenog elementa, samo upotrijebite transform: translate(0, -50%):
.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }
Imajte na umu da translate(0, -50%)je to skraćenica za translateX(0)i translateY(-50%). Možete i pisati transform: translateY(-50%)da usredsredite podređeni element.
Kako usredotočiti div vertikalno pomoću Flexboxa
Poput centriranja stvari vodoravno, Flexbox olakšava centriranje stvari okomito.
Da biste element usredsredili okomito, primijenite display: flexi align-items: centerna nadređeni element:
.container { ... display: flex; align-items: center; }
Kako centrirati i okomito i vodoravno
Kako centrirati div vertikalno i vodoravno s CSS apsolutnim pozicioniranjem i negativnim marginama
Ovo je vrlo slično gornjoj metodi za centriranje elementa okomito. Kao i prošli put, morate znati širinu i visinu elementa koji želite centrirati.
Postavite displaysvojstvo nadređenog elementa na relative.
Zatim postavite djetetovo displaysvojstvo na absolute, topna 50%i leftna 50%. Ovo samo centrira gornji lijevi kut podređenog elementa okomito i vodoravno.
Da biste doista centrirali podređeni element, primijenite negativnu gornju marginu postavljenu na polovicu visine podređenog elementa i negativnu lijevu marginu postavljenu na polovicu širine podređenog elementa:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }
Kako centrirati div okomito i vodoravno s Transform and Translate
Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.
First, set the display property of the parent element to relative.
Next, set the child element's display property to absolute, top to 50%, and left to 50%.
Finally, use transform: translate(-50%, -50%) to truly center the child element:
.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
How to Center a Div Vertically and Horizontally with Flexbox
Flexbox is the easiest way to center an element both vertically and horizontally.
This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:
.container { ... display: flex; justify-content: center; align-items: center; }
That's everything you need to know to center with the best of 'em. Now go forth and center all the things.