Vertikal og horisontal centrering af div inde i en anden div

  Skrevet af: Thomas Iversen     06-12-2016     Skrevet i: CSS og CSS3, HTML + HTML5

Den måske lidt kringlede overskrift siger det hele. I denne artikel viser jeg dig kort og godt, hvordan du centrerer en div inde i en anden div, både horisontalt, vertikalt og begge dele på samme tid.

Jeg vil i denne artikel benytte mig af et ny layout mode i CSS3 kaldet flexbox. Flexbox gør det lettere end nogenside før at centrere elementer, deriblandt divs, som ellers tidligere har forvoldt store problemer for mange frontendudviklere.

Lad os først prøve at se på, hvordan du centrerer en div inde i en anden div horisontalt.

Horisontal centrering

Vi har to divs:

<div class="div1">

<div class="div2">
  </div>

</div>

.div1 {
  width: 400px;
  height: 400px;
  border: solid
}
.div2 {
   width: 50px;
  height: 50px;
  border: solid
}

For at centrere div2 horrisontalt i div1, tilføjer jeg følgende til div1 (parent) klassen.

.div1 {
width: 400px;
height: 400px;
border: solid;
display: flex;
justify-content: center;
}

Det giver følgende resultat, hvor div1 er horrisontalt centeret

DEMO – Horisontal centrering

Vertikal centrering

For at centrere div1 vertikalt skal jeg kun lave en lille ændring:

.div1 {
  width: 400px;
  height: 400px;
  border: solid;
  display: flex;
  align-items: center;
}

align-items bruges istedet for justify-content.

Dette giver følgende resultat:
DEMO – Vertikal centrering

Vertikal og horisontal centrering – lige i midten!

Kombinerer man de to således:

.div1 {
  width: 400px;
  height: 400px;
  border: solid;
  display: flex;
   justify-content: center;
  align-items: center;
}

Vil div1 blive centreret i mindten af div2.

Flexbox kan bruges til mange andre ting end blot at centrere en div inde i en anden div. Prøv selv at tage et kig på https://philipwalton.github.io/solved-by-flexbox/ for at se flere muligheder med felxbox.