Jeg ønsker at centrere en div, der er tilføjet inde i en anden div.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
Dette er den CSS, jeg bruger i øjeblikket.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
Som du kan se, afhænger den fremgangsmåde, jeg bruger nu, af værdierne for bredde og højde af innerDiv
.Hvis bredden/højden ændres, skal jeg ændre værdierne for margin-top
og margin-left
.Er der nogen generisk løsning, som jeg kan bruge til altid at centrere innerDiv
uanset dens størrelse?
Jeg har fundet ud af, at jeg ved at bruge margin:auto
kan tilpasse innerDiv'en horisontalt til midten, men hvad med vertikal tilpasning til midten?
Lodret midterjustering virker, men du skal bruge table-cell
på dit overordnede element og inline-block
på det underordnede element.
Denne løsning kommer ikke til at virke i IE6 & 7.
Din er den sikrere måde at gå til dem.
Men da du taggede dit spørgsmål med CSS3 og HTML5 tænkte jeg, at du ikke har noget imod at bruge en moderne løsning.
Den klassiske løsning (tabellayout)
Dette var mit oprindelige svar. Den fungerer stadig fint og er den løsning med den bredeste støtte. Table-layout vil påvirke din renderingspræstation, så jeg vil foreslå, at du bruger en af de mere moderne løsninger.
[Her er et eksempel][3]
Testet i:
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
Moderne løsning (transform)
Da transforms er ret godt understøttet nu er der en nemmere måde at gøre det på.
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
[Demo][5]
♥ min foretrukne moderne løsning (flexbox)
Jeg er begyndt at bruge flexbox mere og mere den er også godt understøttet nu Det er langt den nemmeste måde.
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
Flere eksempler & muligheder: Sammenlign alle metoderne på én side
Jeg ved godt, at dette spørgsmål blev stillet for et år siden... Anyway tak CSS3 du kan nemt lodret justerer div i div (eksempel der
)<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>
div
{
display:-moz-box;
-moz-box-align:center;
}