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-align
ypatybę 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“ margin
ypatybę su verte :0 auto
div
.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: flex
ir justify-content: center
pagrindiniam 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 display
pagrindinio elemento ypatybę į relative
.
Tada vaiko elementu, nustatyti display
turtą absolute
ir 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-top
sutelkti 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 display
pirminio elemento ypatybę į relative
.
Vaiko elementui nustatykite display
ypatybę absolute
ir 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: flex
ir align-items: center
pagrindiniam 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 display
pirminio elemento ypatybę į relative
.
Tada nustatykite vaiko display
nuosavybę į 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.