Slik sentrerer du alt med CSS - Juster en div, tekst og mer

Sentrering av ting er en av de vanskeligste aspektene ved CSS.

Metodene i seg selv er vanligvis ikke vanskelige å forstå. I stedet skyldes det mer at det er så mange måter å sentrere ting på.

Metoden du bruker, kan variere avhengig av HTML-elementet du prøver å sentrere, eller om du sentrerer det horisontalt eller vertikalt.

I denne opplæringen vil vi gå gjennom hvordan du sentrerer forskjellige elementer horisontalt, vertikalt og både vertikalt og horisontalt.

Hvordan sentrere horisontalt

Sentrering av elementer horisontalt er generelt sett lettere enn å vertikalt sentrere dem. Her er noen vanlige elementer du kanskje vil sentrere horisontalt og forskjellige måter å gjøre det på.

Slik sentrerer du tekst med CSS Text-Align Center-egenskapen

For å sentrere tekst eller lenker horisontalt, bruk bare text-alignegenskapen med verdien center:

Hello, (centered) World!

p { text-align: center; }

Hvordan sentrere en div med CSS Margin Auto

Bruk stenografiegenskapen marginmed verdien for 0 autoå sentrere elementer på blokknivå som en divhorisontal:

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

Slik sentrerer du en div horisontalt med Flexbox

Flexbox er den mest moderne måten å sentrere ting på siden på, og gjør utformingen av responsive oppsett mye enklere enn det pleide å være. Imidlertid støttes den ikke fullt ut i noen eldre nettlesere som Internet Explorer.

For å sentrere et element horisontalt med Flexbox, er det bare å bruke display: flexog justify-content: centerpå det overordnede elementet:

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

Slik sentrerer du vertikalt

Sentrering av elementer vertikalt uten moderne metoder som Flexbox kan være en virkelig jobb. Her vil vi gå gjennom noen av de eldre metodene for å sentrere ting vertikalt først, og deretter vise deg hvordan du gjør det med Flexbox.

Slik sentrerer du en avdeling loddrett med CSS absolutt posisjonering og negative marginer

I lang tid var dette veien til å sentrere ting vertikalt. For denne metoden må du vite høyden på elementet du vil sentrere.

Sett først displayegenskapen til det overordnede elementet til relative.

Sett deretter displayeiendommen til absoluteog toptil for 50%underelementet:

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

Men det sentrerer egentlig bare den øverste kanten av barnelementet vertikalt.

For å virkelig sentrere barnelementet, sett margin-topeiendommen til -(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 */ }

Hvordan sentrere en div vertikalt med Transform og Translate

Hvis du ikke vet høyden på elementet du vil sentrere (eller til og med om du gjør det), er denne metoden et kjipt triks.

Denne metoden er veldig lik den negative marginen metoden ovenfor. Sett displayegenskapen til det overordnede elementet til relative.

For underordnet element, sett displayeiendommen til absoluteog sett toptil 50%. Nå, i stedet for å bruke en negativ margin for virkelig å sentrere barnet, er det bare å bruke transform: translate(0, -50%):

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

Merk at det translate(0, -50%)er stenografi for translateX(0)og translateY(-50%). Du kan også skrive for transform: translateY(-50%)å sentrere barnelementet vertikalt.

Slik sentrerer du en div vertikalt med Flexbox

Som å sentrere ting horisontalt, gjør Flexbox det veldig enkelt å sentrere ting vertikalt.

For å sentrere et element vertikalt, bruk display: flexog align-items: centerpå det overordnede elementet:

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

Hvordan sentrere både vertikalt og horisontalt

Slik sentrerer du en div vertikalt og horisontalt med CSS Absolute Positioning og Negative Marges

Dette ligner veldig på metoden ovenfor for å sentrere et element vertikalt. Som forrige gang må du vite bredden og høyden på elementet du vil sentrere.

Sett displayegenskapen til det overordnede elementet til relative.

Sett deretter barnets displayeiendom til absolute, toptil 50%og lefttil 50%. Dette sentrerer bare det øverste venstre hjørnet av underordnet element vertikalt og horisontalt.

For å virkelig sentrere underelementet, bruk en negativ toppmargin satt til halvparten av underelementets høyde, og en negativ venstre margin satt til halvparten av underelementets bredde:

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

Hvordan sentrere en div vertikalt og horisontalt med 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; }

Det er alt du trenger å sentrere med det beste av dem. Gå videre og sentrer alle tingene.