Ik wil een div
verticaal centreren met CSS. Ik wil geen tabellen of JavaScript, maar alleen pure CSS. Ik heb wat oplossingen gevonden, maar die missen allemaal Internet Explorer 6 ondersteuning.
<body>
<div>Div to be aligned vertically</div>
</body>
Hoe kan ik een div
verticaal centreren in alle grote browsers, inclusief Internet Explorer 6?
Hieronder staat de beste all-around oplossing die ik kon bouwen om een inhoudsbox met vaste breedte en flexibele hoogte verticaal en horizontaal te centreren. Het is getest en werkt voor recente versies van Firefox, Opera, Chrome, en Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
Bekijk een werkend voorbeeld met dynamische inhoud
Ik heb wat dynamische inhoud ingebouwd om de flexibiliteit te testen en zou graag willen weten of iemand er problemen mee ziet. Het zou ook goed moeten werken voor gecentreerde overlays -- lightbox, pop-up, enz.
Eigenlijk heb je twee div's nodig voor verticale centrering. De div die de inhoud bevat moet een breedte en hoogte hebben.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>
Hier is het [resultaat][1]
Helaas - maar niet verrassend - is de oplossing ingewikkelder dan je zou willen. Ook helaas, je'zult extra divs moeten gebruiken rond de div die je verticaal gecentreerd wilt hebben.
Voor standaard-compliant browsers zoals Mozilla, Opera, Safari, enz. moet u de buitenste div instellen om te worden weergegeven als een table en de binnenste div om te worden weergegeven als een table-cell - die dan verticaal kan worden gecentreerd. Voor Internet Explorer moet je de binnenste div absoluut positioneren binnen de buitenste div en dan de top opgeven als 50%. De volgende pagina's leggen deze techniek goed uit en geven ook enkele code voorbeelden:
Er is ook een techniek om de verticale centrering te doen met behulp van JavaScript. Verticale uitlijning van inhoud met JavaScript & CSS demonstreert het.