NemProgrammering.dk logo

Vertikal og horisontal centrering af div inde i en anden div

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

div inde i en anden div

Af Thomas Iversen

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.

Skriv en kommentar!

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.

Forum stats

  • 1146 Antal brugere
  • 1611 Antal emner
  • 8069 Antal indlæg

Deltag selv!

Nyt fra vores bloggere

Besøg vores webbureau

WordPress Hjemmeside

Nyheder

  • Lær, hvordan du kommer til tops i Google og får flere kunder med vores nye SEO kursus for begyndere. Læs mere her!
  • Du kan nu lære avanceret WordPress her på siden. Lær at tilpasse dit tema samt udvikle dit eget plugin! Lœs mere...
  • Nu kan du også lære at bruge Photoshop fra bunden! Se med her: Photoshop kursus
  • Du kan ikke drive et velfungerende udviklingsmiljø uden hurtigt bredbånd. Se vores artikel om Billig Bredbånd
  • Vil du blive bedre til Google Sheets? Så kan du med fordel se vores nye Google Sheets kursus!