Ik wil een div centreren die is toegevoegd binnen een andere div.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
Dit is de CSS die ik momenteel gebruik.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
Zoals u kunt zien, is de aanpak die ik nu gebruik afhankelijk van de waarden voor breedte en hoogte van innerDiv
. Als de breedte/hoogte verandert, zal ik de margin-top
en margin-left
waarden moeten aanpassen. Is er een generieke oplossing die ik kan gebruiken om de innerDiv
altijd te centreren, ongeacht de grootte?
Ik ben erachter gekomen dat ik met margin:auto
de innerDiv horizontaal in het midden kan zetten, maar hoe zit het met verticaal in het midden?
Vertical align middle werkt, maar dan moet je table-cell
gebruiken op je parent element en inline-block
op het child.
Deze oplossing gaat niet werken in IE6 & 7.
De jouwe is de veiligere manier voor die.
Maar omdat je je vraag getagged hebt met CSS3 en HTML5 dacht ik dat je het niet erg vond om een moderne oplossing te gebruiken.
De klassieke oplossing (tabel layout)
Dit was mijn oorspronkelijke antwoord. Het werkt nog steeds prima en is de oplossing met de breedste ondersteuning. Tabel-layout zal invloed hebben op uw rendering prestaties dus ik zou voorstellen dat u een van de meer moderne oplossingen gebruikt.
[Hier is een voorbeeld][3]
Getest in:
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 oplossing (transform)
Aangezien transformaties nu redelijk goed ondersteund worden is er een eenvoudiger manier om het te doen.
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]
♥ mijn favoriete moderne oplossing (flexbox)
Ik ben flexbox meer en meer gaan gebruiken het wordt nu ook goed ondersteund Het is verreweg de makkelijkste manier.
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
Meer voorbeelden & mogelijkheden: Vergelijk alle methodes op één pagina
Ik weet dat deze vraag al een jaar geleden gesteld is... Hoe dan ook dankzij CSS3 kunt u gemakkelijk div verticaal uitlijnen in div (voorbeeld daar
)<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>
div
{
display:-moz-box;
-moz-box-align:center;
}