Sådan centreres alt med CSS - Juster en div, tekst og mere

Centrering af ting er et af de sværeste aspekter ved CSS.

Metoderne i sig selv er normalt ikke vanskelige at forstå. I stedet skyldes det mere, at der er så mange måder at centrere ting på.

Den metode, du bruger, kan variere afhængigt af det HTML-element, du prøver at centrere, eller om du centrerer det vandret eller lodret.

I denne vejledning gennemgår vi, hvordan man centrerer forskellige elementer vandret, lodret og både lodret og vandret.

Sådan centreres vandret

Centreringselementer vandret er generelt lettere end at centrere dem lodret. Her er nogle almindelige elementer, du måske vil centrere vandret og forskellige måder at gøre det på.

Sådan centreres tekst med CSS Text-Align Center-ejendommen

For at centrere tekst eller links vandret skal du bare bruge text-alignegenskaben med værdien center:

Hello, (centered) World!

p { text-align: center; }

Sådan centreres en div med CSS Margin Auto

Brug stenografiegenskaben marginmed værdien 0 autotil at centrere elementer på blokniveau som en divvandret:

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

Sådan centreres en div horisontalt med Flexbox

Flexbox er den mest moderne måde at centrere ting på siden på og gør design af lydhøre layouts meget nemmere end det plejede at være. Det understøttes dog ikke fuldt ud i nogle ældre browsere som Internet Explorer.

For at centrere et element vandret med Flexbox skal du bare anvende display: flexog justify-content: centerpå det overordnede element:

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

Sådan centreres lodret

Centrering af elementer lodret uden moderne metoder som Flexbox kan være en reel opgave. Her går vi over nogle af de ældre metoder til at centrere ting lodret først og derefter viser dig, hvordan du gør det med Flexbox.

Sådan centreres en div lodret med CSS absolut positionering og negative margener

I lang tid var dette en måde at centrere ting lodret på. Til denne metode skal du kende højden på det element, du vil centrere.

Indstil først displayegenskaben for det overordnede element til relative.

Derefter for underordnet element skal du indstille displayejendommen til absoluteog toptil 50%:

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

Men det centrerer egentlig bare lodret den øverste kant af barnelementet.

For virkelig at centrere underordnet element skal du indstille margin-topejendommen 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 */ }

Sådan centreres en div lodret med Transform og Translate

Hvis du ikke kender højden på det element, du vil centrere (eller endda hvis du gør det), er denne metode et smukt trick.

Denne metode svarer meget til metoden med negative marginer ovenfor. Sæt displayegenskaben for det overordnede element til relative.

For underordnet element skal du indstille displayejendommen til absoluteog indstille den toptil 50%. Nu i stedet for at bruge en negativ margen til virkelig at centrere underordnet element, skal du bare bruge transform: translate(0, -50%):

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

Bemærk, at der translate(0, -50%)er stenografi for translateX(0)og translateY(-50%). Du kan også skrive for transform: translateY(-50%)at centrere barnelementet lodret.

Sådan centreres en div lodret med Flexbox

Ligesom at centrere ting vandret, gør Flexbox det super nemt at centrere ting lodret.

For at centrere et element lodret skal du anvende display: flexog align-items: centerpå det overordnede element:

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

Sådan centreres både lodret og vandret

Sådan centreres en Div lodret og vandret med CSS Absolut Positionering og Negative Margener

Dette svarer meget til ovenstående metode for at centrere et element lodret. Ligesom sidste gang skal du kende bredden og højden på det element, du vil centrere.

Sæt displayegenskaben for det overordnede element til relative.

Indstil derefter barnets displayejendom til absolute, toptil 50%og lefttil 50%. Dette centrerer bare det øverste venstre hjørne af underordnet element lodret og vandret.

For virkelig at centrere underordnet element skal du anvende en negativ øverste margen indstillet til halvdelen af ​​underordnet elementhøjde og en negativ venstre margen indstillet til halvdelen af ​​underordnet elementets 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 */ }

Sådan centreres en div lodret og vandret med Transform og 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 hvad du behøver at vide for at centrere med det bedste af dem. Gå nu ud og centrer alle tingene.