Kā visu centrēt ar CSS - izlīdziniet div, tekstu un citus

Lietu centrēšana ir viens no sarežģītākajiem CSS aspektiem.

Pašas metodes parasti nav grūti saprotamas. Tā vietā tas vairāk ir saistīts ar faktu, ka ir tik daudz veidu, kā centrēt lietas.

Izmantotā metode var atšķirties atkarībā no HTML elementa, kuru mēģināt centrēt, vai no tā, vai centrējat to horizontāli vai vertikāli.

Šajā apmācībā mēs aplūkosim, kā dažādus elementus centrēt horizontāli, vertikāli un gan vertikāli, gan horizontāli.

Kā centrēt horizontāli

Elementu centrēšana horizontāli parasti ir vienkāršāka nekā vertikāla centrēšana. Šeit ir daži kopīgi elementi, kurus, iespējams, vēlaties centrēt horizontāli, un dažādi veidi, kā to izdarīt.

Kā centrēt tekstu ar CSS teksta izlīdzināšanas centra īpašumu

Lai centrētu tekstu vai saites horizontāli, vienkārši izmantojiet text-alignrekvizītu ar vērtību center:

Hello, (centered) World!

p { text-align: center; }

Kā centrēt div, izmantojot CSS Margin Auto

Izmantojiet stenogrāfijas marginrekvizītu ar vērtību, 0 autolai centrētu bloku līmeņa elementus, piemēram, divhorizontāli:

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

Kā centrēt Div horizontāli ar Flexbox

Flexbox ir vismodernākais veids, kā centrēt lietas lapā, un tas atvieglo atsaucīgu izkārtojumu noformēšanu daudz agrāk nekā agrāk. Tomēr tas netiek pilnībā atbalstīts dažās mantotajās pārlūkprogrammās, piemēram, Internet Explorer.

Lai centrētu elementu horizontāli, izmantojot Flexbox, vienkārši lietojiet display: flexun justify-content: centervecākajam elementam:

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

Kā centrēt vertikāli

Elementu centrēšana vertikāli bez mūsdienu metodēm, piemēram, Flexbox, var būt īsts darbs. Šeit mēs aplūkosim dažas no vecākajām metodēm, kā vispirms centrēt lietas vertikāli, pēc tam parādīsim, kā to izdarīt ar Flexbox.

Kā centrēt divu vertikāli ar CSS absolūto pozicionēšanu un negatīvajām robežām

Ilgu laiku tas bija veids, kā centrēt lietas vertikāli. Lai izmantotu šo metodi, jums jāzina tā elementa augstums, kuru vēlaties centrēt.

Vispirms iestatiet displayvecāka elementa rekvizītu uz relative.

Tad bērna elementu, iestatiet displayīpašumu absoluteun topuz 50%:

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

Bet tas faktiski tikai vertikāli centrē bērna elementa augšējo malu.

Lai patiesi centrētu bērnu elementu, iestatiet margin-topīpašumu -(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 */ }

Kā centrēt divu vertikāli ar pārveidošanu un tulkošanu

Ja nezināt tā elementa augstumu, kuru vēlaties centrēt (vai pat ja zināt), šī metode ir veikls triks.

Šī metode ir ļoti līdzīga iepriekšminētajai negatīvo starpību metodei. Iestatiet displayvecāka elementa rekvizītu uz relative.

Bērna elementam iestatiet displayrekvizītu uz absoluteun iestatiet topuz 50%. Tā vietā, lai izmantotu negatīvu rezervi, lai patiesi centrētu bērna elementu, vienkārši izmantojiet transform: translate(0, -50%):

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

Ņemiet vērā, ka translate(0, -50%)ir translateX(0)un ir stenogrāfija translateY(-50%). Varat arī rakstīt, transform: translateY(-50%)lai centrētu bērna elementu vertikāli.

Kā centrēt divu vertikāli ar Flexbox

Tāpat kā lietu centrēšana horizontāli, arī Flexbox ļauj ļoti viegli centrēt lietas vertikāli.

Lai centrētu elementu vertikāli, lietojiet display: flexun align-items: centervecākelementam:

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

Kā centrēt gan vertikāli, gan horizontāli

Kā centrēt divu vertikāli un horizontāli ar CSS absolūto pozicionēšanu un negatīvajām robežām

Tas ir ļoti līdzīgs iepriekš aprakstītajai metodei elementa centrēšanai vertikāli. Tāpat kā iepriekšējā reizē, jums jāzina tā elementa platums un augstums, kuru vēlaties centrēt.

Iestatiet displayvecāka elementa rekvizītu uz relative.

Pēc tam iestatiet bērna displayīpašumu uz absolute, topuz 50%un leftuz 50%. Tas tikai centrē bērna elementa augšējo kreiso stūri vertikāli un horizontāli.

Lai patiesi centrētu bērnu elementu, lietojiet negatīvu augšējo robežu, kas iestatīta uz pusi bērna elementa augstuma, un negatīvo kreiso rezervi, kas iestatīta uz pusi bērna elementa platuma:

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

Kā centrēt divu vertikāli un horizontāli, izmantojot transformāciju un tulkošanu

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

Tas ir viss, kas jums jāzina, lai centrētos ar labākajiem. Tagad ej uz priekšu un centrē visas lietas.