Centrering af elementer

Centrering i CSS, og især lodret/vertikal centrering, er ikke specielt ituitivt, for der findes nemlig ingen center property man lige kan smide på sin firkant *. Så hvordan får man centreret en firkant i midten af en anden firkant?

Her er et par eksempler på hvordan man kan centrere sine elementer i forskellige scenarier.
* Og så løj jeg, der findes faktisk en center property i CSS3, som der også kommer et eksempel på :)

I nedenstående eksempler bruges følgende markup:

<div class="box-container">
  <div class="small-box box1">Box 1</div>
</div>

<div class="box-container fluid">
  <div class="small-box box1">Box 1</div>
</div>

Horisontal centrering – Vilkårlig bredde og højde

At centrerer horisontalt er den nemme. Den klare vi med margin: auto.

Box 1
.box1 {
  width: 100px;
  height: 100px;
  margin: auto;
  text-align: center;
}

Ved at sætte margin til auto sætter browseren margin-left og margin-right til lige meget og det centrerer elementet i midten af dens omlæggende container, ligegyldigt bredde af elementet vi vil centrere. Bemærk: auto virker ikke på inline elementer, så det vil ikke virke på f.eks. et span element.

Så ønsker man at centrere et billede med margin: auto, så sørg for at sætte display: block på billedet også.

Teksten i boxen centreres med text-align: center.

Centrering vertikalt – fast bredde og højde

Hvis vi ønsker at centrere et element inde i et andet element og man samtidig kender størrelsen på den omliggende box, så kan vi bruge position attributten:

Box 2
.box2 {
   width: 100px;
   height: 100px;
   position: absolute;
   top: 50px;
   left: 150px;
}

Få at få centreret boxen tager vi blot dens dimensioner og deler med 2 for at finde center. De værdier trækker vi så fra box-containerens dimensioner der også deles med 2 (Box-containeren er 400px bred og 200px høj):

top: 100 / 2 – 200 / 2 = 50 px

left: 100 / 2 – 400 / 2 = 150 px

Det er ikke en særlig fleksibel teknik, eftersom den kræver at man kender dimensionerne på både udvendig og indvendig box, tilgengæld virker den fint i alle browser afskygninger!

Samme teknik kan dog også bruge med % angivelser i stedet for pixels, for en lidt mere fleksibel løsning:

Box 2 – Fluid

Centrering med ukendt udvendig container størrelser

Hvis vi kun kender til den indvendige box’s dimensioner kan vi bruge en anden teknik med position:

Box 3
.box3 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}   

Med top og left sat til 50% placeres boxens øverste venstre hjørne i center af den udvendige container og en negativ margin-top og margin-left værdi sat til halvdelen af bredden på boksen rykker boxen ind i center.

Teknikken har en smule ekstra CSS end forrige teknik, den er dog lidt mere fleksibel. Den virker i alle også i alle browserer.

Absolute center teknikken

Her er en lille forbedring over forrige teknik. I forrige eksempel brugte vi position og negativ margin, men vi kan faktisk sættes margin til auto og så bruge position til at få boxen centreret:

Box 4
.box4 {
  height: 30%;
  width: 30%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Så her slipper man for at beregne sin margin, men højde og bredde skal stadigvæk angives. Absolute center teknikken virker i alle browsere.

Centrering med fleksible dimensioner

I det her eksempel kender vi hverken dimensionerne på den inderste box eller den udvendige container. Den inderste box kan tilpasse sig efter indholdet der er i den:

Box 5 – Den tilpasser sig efter indholdet, men holder sig stadigvæk i centrum.
.box4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
}    

Igen placeres boxen med top og left position, men da vi ikke kender boxens størrelse kan vi ikke bruge negativ margin for at rykke den i centrum af containeren. I stedet kan vi bruge transform: translate. Translate flytter boxens X og Y koordinater, og ved at bruge procent som input omregner browseren den procent værdi i forhold til boxens størrelse, så ved at sætte en negativ procent værdi på 50% som input til både X og Y så rammer vi centrum af containeren. Awsome!

Meget fleksibel teknik, men what’s the catch? Transform understøttes ikke af alle IE8 – men det lever vi med. Den er dog måske ikke lige så nem at forstå for CSS begyndere, men nu har jeg jo forklaret den ;)

Flexbox – Endelig en center property

Ok, jeg afslørede jo at der rent faktisk findes en center property nu i CSS3, og den kommer fra flexbox – en ny layout model på steoride. Flexbox kan bruges til at lave grids og meget andet, men lad os se hvordan den kan bruges til at centrerer:

Box 6 – Magisk box er magisk centreret
.box6 {
  height: 50%;
  width: 50%;
}

.box-container.flex-rdy {
  display: flex;
  justify-content: center;
  align-items: center;
}    

Så i stedet for det er boxen der selv sørger for at placerer sig i centrum, så er det her box-containeren der fortæller hvor dens content skal placeres. Meget elegant og simple at implementere, man kan dog diskutere om justity-content navnet giver mening.

Overraskende nok så er de fleste browsere faktisk med på beatet når det gælder Flexbox, der kan dog eftersigende være lidt afvigende opførsel mellem browserne stadigvæk.

Det var så vertikal centrering

Så er det bare at bruge den man synes passer bedst til ens behov. Happy CSS’ing!

Kommentarer

  1. Tak for tipsene – har du prøvet famo.us – en banebrydende animaiton/placering tilgang.

    PS: inkonsistens i blog-overskriften ‘Centering’ (senere skriver du centrering)

  2. Oups, det er hermed rettet, tak.

    Nej, jeg har ikke prøvet famo.us, men det ser godt nok lækkert ud! Endnu en ting til TODO listen :)

Smid en kommentar

Felter markeret med * skal udfyldes og din e-mail-adresse vil ikke blive offentliggjort.