Kuidas tsentreerida CSS-iga - joondage div, tekst ja palju muud

Asjade tsentreerimine on CSS-i üks raskemaid aspekte.

Meetoditest endist pole tavaliselt raske aru saada. Selle põhjuseks on pigem asjaolu, et asjade tsentreerimiseks on nii palju võimalusi.

Kasutatav meetod võib varieeruda sõltuvalt HTML-elemendist, mida proovite tsentreerida, või sellest, kas tsentreerite seda horisontaalselt või vertikaalselt.

Selles õpetuses käsitleme, kuidas erinevaid elemente tsentreerida nii horisontaalselt, vertikaalselt kui ka vertikaalselt ja horisontaalselt.

Kuidas horisontaalselt tsentreerida

Elementide horisontaalne tsentreerimine on üldiselt lihtsam kui nende vertikaalne tsentreerimine. Siin on mõned levinumad elemendid, mida võiksite horisontaalselt koondada, ja erinevad viisid selle tegemiseks.

Kuidas teksti tsentreerida atribuudiga CSS Text-Align Center

Teksti või linkide horisontaalseks tsentreerimiseks kasutage lihtsalt text-alignatribuuti väärtusega center:

Hello, (centered) World!

p { text-align: center; }

Kuidas Div-i tsentreerida CSS Margin Auto abil

Lühitasandi marginatribuudi väärtusega kasutage plokitaseme 0 autoelementide tsentreerimiseks divhorisontaalselt:

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

Kuidas Div-d Flexboxiga horisontaalselt tsentreerida

Flexbox on moodsaim viis lehel olevate asjade koondamiseks ja muudab tundlike paigutuste kujundamise palju lihtsamaks kui varem. Mõnes päritud brauseris, näiteks Internet Exploreris, ei toetata seda täielikult.

Elemendi Flexboxiga horisontaalselt tsentreerimiseks rakendage lihtsalt display: flexja elementi vanemelement justify-content: center:

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

Kuidas vertikaalselt tsentreerida

Elementide vertikaalne tsentreerimine ilma kaasaegsete meetoditeta, nagu Flexbox, võib olla tõeline töö. Siin käsitleme mõningaid vanemaid meetodeid kõigepealt asjade vertikaalseks tsentreerimiseks, seejärel näitame teile, kuidas seda Flexboxiga teha.

Kuidas keskendada div vertikaalselt CSS-i absoluutse positsioneerimise ja negatiivsete veeristega

Pikka aega oli see tee vertikaalseks tsentreerimiseks. Selle meetodi jaoks peate teadma selle elemendi kõrgust, mille soovite tsentreerida.

Kõigepealt määrake displayvanema elemendi atribuudiks relative.

Siis laps element, määrata displayvara absoluteja topet 50%:

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

Kuid see keskendab lapse elemendi ülemise serva lihtsalt vertikaalselt.

Alamelemendi tõeliseks tsentreerimiseks määrake margin-topatribuudiks -(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 */ }

Kuidas Div-i vertikaalselt teisendada ja teisendada

Kui te ei tea elemendi kõrgust, mida soovite tsentreerida (või isegi kui teate), on see meetod suurepärane nipp.

See meetod sarnaneb ülaltoodud negatiivsete marginaalide meetodiga. Määrake vanemelemendi displayatribuudiks väärtus relative.

Lapseelemendi jaoks määrake displayatribuudiks väärtus absoluteja topväärtuseks 50%. Selle asemel, et kasutada lapse elemendi tõeliseks keskendamiseks negatiivset veerist, kasutage lihtsalt järgmist transform: translate(0, -50%):

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

Pange tähele, et see translate(0, -50%)on translateX(0)ja translateY(-50%). Võite kirjutada transform: translateY(-50%)ka lapse elemendi vertikaalseks tsentreerimiseks.

Kuidas Div-i vertikaalselt keskendada Flexboxiga

Nagu asjade horisontaalne tsentreerimine, on ka Flexboxil asjade vertikaalne tsentreerimine ülilihtne.

Elemendi vertikaalseks tsentreerimiseks rakendage display: flexja align-items: centervanemelemendile:

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

How to Center Both Vertically and Horizontally

How to Center a Div Vertically and Horizontally with CSS Absolute Positioning and Negative Margins

This is very similar to the method above to center an element vertically. Like last time, you must know the width and height of the element you want to center.

Set the display property of the parent element to relative.

Then set the child's display property to absolute, top to 50%, and left to 50%. This just centers the top left corner of the child element vertically and horizontally.

To truly center the child element, apply a negative top margin set to half the child element's height, and a negative left margin set to half the child element's width:

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

How to Center a Div Vertically and Horizontally with 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; }

See on kõik, mida peate teadma, et neist parimat teha. Nüüd minge edasi ja keskendage kõik asjad.