A dolgok központosítása a CSS egyik legnehezebb aspektusa.
Magukat a módszereket általában nem nehéz megérteni. Ehelyett inkább annak köszönhető, hogy nagyon sokféleképpen lehet a dolgokat központosítani.
Az Ön által használt módszer attól függően változhat, hogy milyen HTML elemet akar középre állítani, vagy attól, hogy vízszintesen vagy függőlegesen központosítja-e.
Ebben az oktatóanyagban áttekintjük, hogyan lehet a különböző elemeket vízszintesen, függőlegesen, függőlegesen és vízszintesen egyaránt középre állítani.
Hogyan lehet vízszintesen középre állítani
Az elemek vízszintes középre állítása általában könnyebb, mint a függőleges központosítás. Íme néhány általános elem, amelyet érdemes vízszintesen középre állítani, és ennek különböző módjai.
Szöveg központosítása a CSS Text-Align Center tulajdonságával
A szöveg vagy hivatkozások vízszintes középre állításához használja a text-aligntulajdonságot a következő értékkel center:
Hello, (centered) World!
p { text-align: center; }
Div osztályozása a CSS Margin Auto segítségével
Használja a gyorsírás margintulajdonságot az értékkel 0 autoblokkszintű elemek középre állításához, például divvízszintesen:
.child { ... margin: 0 auto; }
Hogyan lehet a Div-t vízszintesen központosítani a Flexbox segítségével
A Flexbox a legmodernebb módszer arra, hogy a dolgokat az oldalra összpontosítsa, és sokkal könnyebbé teszi az adaptív elrendezések tervezését, mint korábban. Egyes régi böngészőkben, például az Internet Explorerben azonban ez nem teljesen támogatott.
Ha egy elemet vízszintesen kíván középre állítani a Flexbox segítségével, csak alkalmazza display: flexés justify-content: centera szülő elemre:
.container { ... display: flex; justify-content: center; }
Hogyan lehet középre állítani függőlegesen
Az elemek függőleges középre állítása olyan modern módszerek nélkül, mint a Flexbox, igazi gondot jelenthet. Itt áttekintünk néhány régebbi módszert, amellyel először függőlegesen központosíthatjuk a dolgokat, majd megmutatjuk, hogyan kell ezt a Flexbox segítségével csinálni.
Hogyan lehet egy Div-t függőlegesen középre állítani CSS abszolút pozicionálás és negatív margók segítségével
Sokáig ez volt a módja a dolgok függőleges központosításának. Ehhez a módszerhez ismernie kell a központozni kívánt elem magasságát.
Először állítsa displaya szülő elem tulajdonságát relative.
Ekkor a gyermek elem, meg a displayvagyon absoluteés topa 50%:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }
De ez valójában csak függőlegesen központosítja a gyermekelem felső szélét.
A gyermek elem valóban középre állításához állítsa a margin-toptulajdonságot a következőkre -(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 */ }
Hogyan kell egy Div-et középre állítani függőlegesen az Átalakítás és fordítás segítségével
Ha nem ismeri a központozni kívánt elem magasságát (vagy még akkor sem, ha igen), ez a módszer remek trükk.
Ez a módszer nagyon hasonlít a fenti negatív margók módszeréhez. Állítsa be a displaytulajdonság a szülő elem relative.
A gyermek elem, meg a displaytulajdonságot absolute, és állítsa be top, hogy 50%. Most ahelyett, hogy negatív margót használna a gyermekelem valódi középre helyezéséhez, csak használja transform: translate(0, -50%):
.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }
Vegye figyelembe, hogy translate(0, -50%)a translateX(0)és a rövidítés translateY(-50%). Írhat úgy is, transform: translateY(-50%)hogy a gyermek elem függőlegesen középre kerül.
Hogyan lehet egy Div-et központosítani függőlegesen a Flexbox segítségével
A dolgok vízszintes központosításához hasonlóan a Flexbox megkönnyíti a dolgok függőleges központosítását.
Ha egy elemet függőlegesen kíván középre állítani , akkor alkalmazza display: flexés align-items: centera szülő elemre:
.container { ... display: flex; align-items: center; }
Hogyan lehet középre állítani függőlegesen és vízszintesen is
Hogyan kell középre állítani a div-t függőlegesen és vízszintesen a CSS abszolút pozicionálás és a negatív margók segítségével?
Ez nagyon hasonlít a fenti módszerhez egy elem függőleges központosításához. A legutóbbihoz hasonlóan ismernie kell a középre állítani kívánt elem szélességét és magasságát.
Állítsa be a displaytulajdonság a szülő elem relative.
Ezután állítsa a gyermek displaytulajdonságait a absolute, topa 50%és a leftértékre 50%. Ez csak a gyermekelem bal felső sarkát állítja függőlegesen és vízszintesen.
A gyermekelem valóban középre igazításához alkalmazzon egy negatív felső margót a gyermekelem magasságának felére, a negatív bal margót pedig a gyermekelem szélességének felére:
.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 */ }
Hogyan lehet középre állítani a div-t függőlegesen és vízszintesen az Átalakítás és fordítás segítségével
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.