Kako centrirati karkoli s CSS - poravnajte delitev, besedilo in drugo

Centriranje stvari je eden najtežjih vidikov CSS.

Metod običajno ni težko razumeti. Namesto tega je to bolj posledica dejstva, da obstaja toliko načinov za centriranje stvari.

Način, ki ga uporabljate, se lahko razlikuje glede na element HTML, ki ga želite centrirati, ali od tega, ali ga centrirate vodoravno ali navpično.

V tej vadnici bomo preučili, kako centrirati različne elemente vodoravno, navpično ter navpično in vodoravno.

Kako vodoravno centrirati

Vodoravno centriranje elementov je na splošno lažje kot njihovo navpično centriranje. Tu je nekaj pogostih elementov, ki jih boste morda želeli centrirati vodoravno, in različne načine za to.

Kako centrirati besedilo z lastnostjo CSS Text-Align Center

Če želite besedilo ali povezave centrirati vodoravno, uporabite text-alignlastnost z vrednostjo center:

Hello, (centered) World!

p { text-align: center; }

Kako centrirati delitev s samodejno maržo CSS

Uporabite okrajšavo marginz vrednostjo 0 autoza centriranje elementov na ravni bloka, kot je divvodoravno:

.child { ... margin: 0 auto; }

Kako vodoravno centrirati div s Flexboxom

Flexbox je najsodobnejši način za centriranje stvari na strani in olajša oblikovanje odzivnih postavitev kot nekoč. Vendar v nekaterih starih brskalnikih, kot je Internet Explorer, ni v celoti podprt.

Če želite element vodoravno centrirati s Flexboxom, samo uporabite display: flexin justify-content: centernadrejeni element:

.container { ... display: flex; justify-content: center; }

Kako navpično centrirati

Centriranje elementov navpično brez sodobnih metod, kot je Flexbox, je lahko pravi zalogaj. Tu bomo pregledali nekatere starejše metode, da bomo stvari najprej centrirali navpično, nato pa vam pokazali, kako to storiti s Flexboxom.

Kako navpično centrirati div z absolutnim pozicioniranjem in negativnimi robovi CSS

Dolgo časa je bila to pot, da se stvari centrirajo navpično. Za to metodo morate poznati višino elementa, ki ga želite centrirati.

Najprej nastavite displaylastnost nadrejenega elementa na relative.

Potem za otroka element, nastavite displaylastnost absolutein topda 50%:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

Toda to v resnici samo navpično centrira zgornji rob podrejenega elementa.

Če želite podrejeni element resnično centrirati, nastavite margin-toplastnost 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 navpično centrirati div s Transform and Translate

Če ne veste višine elementa, ki ga želite centrirati (ali celo, če ga poznate), je ta metoda prijeten trik.

Ta metoda je zelo podobna zgornji metodi negativnih marž. Nastavite displaylastnost nadrejenega elementa na relative.

Za podrejeni element nastavite displaylastnost na absolutein nastavite topna 50%. Zdaj, namesto da uporabite negativni rob za resnično centriranje podrejenega elementa, samo uporabite transform: translate(0, -50%):

.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

Upoštevajte, da translate(0, -50%)je okrajšava za translateX(0)in translateY(-50%). Lahko tudi pišete, transform: translateY(-50%)da podrejeni element centrirate navpično.

Kako navpično centrirati div s Flexboxom

Tako kot centriranje stvari vodoravno, tudi Flexbox izjemno enostavno centrira stvari navpično.

Če želite element navpično centrirati, uporabite display: flexin align-items: centernadrejeni element:

.container { ... display: flex; align-items: center; }

Kako centrirati tako navpično kot vodoravno

Kako centrirati div navpično in vodoravno z absolutnim pozicioniranjem in negativnimi robovi CSS

To je zelo podobno zgornji metodi za centriranje elementa navpično. Kot prejšnjič morate vedeti širino in višino elementa, ki ga želite centrirati.

Nastavite displaylastnost nadrejenega elementa na relative.

Nato nastavite otrokovo displaylastnost na absolute, topna 50%in leftna 50%. To zgolj centrira zgornji levi kot podrejenega elementa navpično in vodoravno.

Če želite podrejeni element resnično centrirati, uporabite negativni zgornji rob, nastavljen na polovico višine podrejenega elementa, in negativni levi rob, nastavljen na polovico širine podrejenega 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 navpično in 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; }

To je vse, kar morate vedeti, da se osredotočite na najboljše. Zdaj pojdi naprej in centriraj vse stvari.