Kuinka keskittää kaikki CSS: ään - tasaa div, teksti ja paljon muuta

Asioiden keskittäminen on yksi CSS: n vaikeimmista puolista.

Menetelmiä itsessään ei yleensä ole vaikea ymmärtää. Sen sijaan se johtuu enemmän siitä, että on niin monia tapoja keskittää asioita.

Käyttämäsi menetelmä voi vaihdella HTML-elementin mukaan, jota yrität keskittää, tai keskitätkö sen vaaka- tai pystysuunnassa.

Tässä opetusohjelmassa käymme läpi, kuinka eri elementit keskitetään vaakasuoraan, pystysuoraan sekä sekä pysty- että vaakasuunnassa.

Kuinka keskittää vaakasuunnassa

Elementtien keskittäminen vaakasuoraan on yleensä helpompaa kuin niiden pystysuuntainen keskittäminen. Tässä on joitain yleisiä elementtejä, jotka kannattaa ehkä keskittää vaakasuunnassa, ja erilaisia ​​tapoja tehdä se.

Tekstin keskittäminen CSS Text-Align Center -ominaisuuteen

Jos haluat keskittää tekstin tai linkit vaakatasoon, käytä vain text-alignominaisuutta, jonka arvo on center:

Hello, (centered) World!

p { text-align: center; }

Div: n keskittäminen CSS Margin Auto -sovelluksella

Käytä lyhenteen marginominaisuutta arvolla 0 autokeskittämään lohkotason elementit kuten divvaakasuunnassa:

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

Kuinka keskittää div vaakasuunnassa Flexboxilla

Flexbox on nykyaikaisin tapa keskittää asiat sivulle, ja se helpottaa reagoivien ulkoasujen suunnittelua paljon helpommin kuin ennen. Sitä ei kuitenkaan tueta täysin joissakin vanhoissa selaimissa, kuten Internet Explorer.

Jos haluat keskittää elementin vaakasuunnassa Flexboxilla, aseta vain display: flexja justify-content: centerylätason elementtiin:

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

Kuinka keskittää pystysuunnassa

Elementtien keskittäminen pystysuoraan ilman nykyaikaisia ​​menetelmiä, kuten Flexbox, voi olla todellinen työ. Täällä käymme läpi joitain vanhempia tapoja keskittää asiat ensin pystysuunnassa ja näyttää sitten, miten se tehdään Flexboxilla.

Kuinka keskittää div pystysuunnassa CSS: n absoluuttisella paikannuksella ja negatiivisilla marginaaleilla

Pitkään tämä oli tapa keskittää asiat pystysuunnassa. Tätä menetelmää varten sinun on tiedettävä keskitettävän elementin korkeus.

Aseta ensin displaypääelementin ominaisuudeksi relative.

Sitten lapselle elementti, aseta displayominaisuuden absoluteja topettä 50%:

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

Mutta se keskittää oikeastaan ​​vain vertikaalisesti lapsielementin yläreunan.

Jos haluat keskittää alielementin todella, aseta margin-topominaisuus seuraavasti -(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 */ }

Kuinka keskittää div pystysuunnassa muunnoksen ja käännöksen avulla

Jos et tiedä keskitettävän elementin korkeutta (tai vaikka tiedätkin), tämä menetelmä on hieno temppu.

Tämä menetelmä on hyvin samanlainen kuin yllä oleva negatiivisten marginaalien menetelmä. Aseta displaypääelementin ominaisuudeksi relative.

Lapselle elementti, aseta displayominaisuuden absoluteja asettaa topon 50%. Sen sijaan, että käytät negatiivista marginaalia lapsielementin keskittämiseen, käytä vain transform: translate(0, -50%):

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

Huomaa, että translate(0, -50%)lyhenne on translateX(0)ja translateY(-50%). Voit myös kirjoittaa transform: translateY(-50%), että lapsielementti keskitetään pystysuunnassa.

Kuinka keskittää div pystysuoraan Flexboxilla

Kuten asioiden keskittäminen vaakasuoraan, Flexbox tekee asioiden pystysuorasta keskittämisestä erittäin helppoa.

Jos haluat keskittää elementin pystysuunnassa, käytä display: flexja align-items: centerpääelementtiin:

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

Kuinka keskittää sekä pysty- että vaakasuunnassa

Kuinka keskittää div-levy pysty- ja vaakasuunnassa CSS-absoluuttisella paikannuksella ja negatiivisilla marginaaleilla

Tämä on hyvin samanlainen kuin yllä oleva menetelmä elementin keskittämiseksi pystysuunnassa. Kuten edellisellä kerralla, sinun on tiedettävä keskitettävän elementin leveys ja korkeus.

Aseta displaypääelementin ominaisuudeksi relative.

Aseta lapsen displayomaisuutta absolute, topjotta 50%, ja leftettä 50%. Tämä vain keskittää lapsielementin vasemman yläkulman pystysuoraan ja vaakasuoraan.

Keskitä lapsielementti todella keskittämällä negatiivinen yläreuna, joka on asetettu puoleen lapsielementin korkeudesta, ja negatiivinen vasen marginaali puoliksi lapsielementin leveydestä:

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

Div: n keskittäminen pysty- ja vaakasuunnassa muunnoksen ja käännöksen avulla

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

Se on kaikki mitä sinun tarvitsee tietää keskitettäessä parhaisiin. Mene nyt ja keskitä kaikki asiat.