Kaip viską centruoti naudojant CSS - sulygiuokite „Div“, „Text“ ir dar daugiau

Daiktų centravimas yra vienas iš sunkiausių CSS aspektų.

Pačius metodus paprastai nesunku suprasti. Užtat tai labiau dėl to, kad yra labai daug būdų, kaip sutelkti dalykus.

Naudojamas metodas gali skirtis priklausomai nuo HTML elemento, kurį bandote centruoti, ar nuo jo centravimo horizontaliai ar vertikaliai.

Šioje pamokoje aptarsime, kaip sutelkti skirtingus elementus horizontaliai, vertikaliai ir vertikaliai, ir horizontaliai.

Kaip centruoti horizontaliai

Centruoti elementus horizontaliai paprastai yra lengviau nei vertikaliai. Čia yra keletas įprastų elementų, kuriuos galbūt norite sutelkti horizontaliai, ir įvairūs būdai tai padaryti.

Kaip centruoti tekstą naudojant CSS teksto sulyginimo centro ypatybę

Norėdami centruoti tekstą ar nuorodas horizontaliai, tiesiog naudokite text-alignypatybę su verte center:

Hello, (centered) World!

p { text-align: center; }

Kaip centruoti „Div“ naudojant „CSS Margin Auto“

Norėdami sutelkti blokų lygio elementus, pavyzdžiui, horizontaliai, naudokite „stenografijos“ marginypatybę su verte :0 autodiv

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

Kaip centruoti „Div“ horizontaliai naudojant „Flexbox“

„Flexbox“ yra moderniausias būdas sutvarkyti dalykus puslapyje, todėl daug lengviau nei anksčiau buvo suprojektuoti reaguojančius maketus. Tačiau tai nėra visiškai palaikoma kai kuriose senose naršyklėse, tokiose kaip „Internet Explorer“.

Jei norite centruoti elementą horizontaliai naudodami „Flexbox“, tiesiog pritaikykite display: flexir justify-content: centerpagrindiniam elementui:

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

Kaip centruoti vertikaliai

Elementų vertikalus centravimas be modernių metodų, tokių kaip „Flexbox“, gali būti tikras darbas. Čia mes apžvelgsime keletą senesnių būdų, kaip pirmiausia viską sutelkti vertikaliai, tada parodysime, kaip tai padaryti naudojant „Flexbox“.

Kaip centruoti „Div“ vertikaliai su CSS absoliučiu padėties nustatymu ir neigiamais paraštėmis

Ilgą laiką tai buvo būdas vertikaliai sutelkti daiktus. Norėdami naudoti šį metodą, turite žinoti elemento, kurį norite centruoti, aukštį.

Pirmiausia nustatykite displaypagrindinio elemento ypatybę į relative.

Tada vaiko elementu, nustatyti displayturtą absoluteir topį 50%:

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

Bet tai iš tikrųjų tik vertikaliai centruoja viršutinį vaiko elemento kraštą.

Norėdami iš tikrųjų margin-topsutelkti vaiko elementą, nustatykite nuosavybę -(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 */ }

Kaip centruoti „Div“ vertikaliai su transformavimu ir vertimu

Jei nežinote elemento, kurį norite centruoti, aukščio (ar net jei žinote), šis metodas yra puikus triukas.

Šis metodas yra labai panašus į aukščiau pateiktą neigiamų maržų metodą. Nustatykite displaypirminio elemento ypatybę į relative.

Vaiko elementui nustatykite displayypatybę absoluteir nustatykite topį 50%. Užuot naudoję neigiamą maržą, kad iš tikrųjų sutelktumėte vaiko elementą, tiesiog naudokite transform: translate(0, -50%):

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

Atkreipkite dėmesį, kad translate(0, -50%)yra translateX(0)ir translateY(-50%). Taip pat galite parašyti transform: translateY(-50%), kad vaiko elementas būtų sutelktas vertikaliai.

Kaip centruoti „Div“ vertikaliai su „Flexbox“

Kaip ir daiktų centravimas horizontaliai, „Flexbox“ leidžia labai lengvai centruoti daiktus vertikaliai.

Norėdami centruoti elementą vertikaliai, pritaikykite display: flexir align-items: centerpagrindiniam elementui:

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

Kaip centruoti tiek vertikaliai, tiek horizontaliai

Kaip centruoti „Div“ vertikaliai ir horizontaliai, naudojant CSS absoliučią padėties nustatymą ir neigiamas paraštes

Tai labai panašu į aukščiau aprašytą metodą elemento centravimui vertikaliai. Kaip ir praėjusį kartą, turite žinoti elemento, kurį norite centruoti, plotį ir aukštį.

Nustatykite displaypirminio elemento ypatybę į relative.

Tada nustatykite vaiko displaynuosavybę į absolute, topį 50%ir leftį 50%. Tai tik nukreipia viršutinį kairįjį vaiko elemento kampą vertikaliai ir horizontaliai.

Norėdami iš tikrųjų centruoti antrinį elementą, naudokite neigiamą viršutinę paraštę, nustatytą pusei vaiko elemento aukščio, ir neigiamą kairįjį kraštą, nustatytą pusei vaiko elemento pločio:

.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 */ }

Kaip centruoti „Div“ vertikaliai ir horizontaliai naudojant transformaciją ir vertimą

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; }

Tai viskas, ką reikia žinoti, kad galėtumėte sutelkti dėmesį į geriausius. Dabar eik į priekį ir sutelkk visus dalykus.