Div volledig centreren

Eén van de moeilijke dingen in CSS is het volledig centreren van een div. Vooraleer je begint kan je beter eens het voorbeeld bekijken om te zien wat we willen bereiken. Om te kunnen beginnen moeten we een div absoluut positioneren. Zo kunnen we de div plaatsen waar we willen met behulp van coördinaten. Dan geven we de div een hoogte/breedte en tenslotte ook zijn positie.

.container {
position:absolute;
width:500px;
height:300px;
top:50%;
left:50%;
background-color:black; //kleurtje om de div goed te zien
}

Als je dit even probeerd zie je dat de div niet echt in het midden staat. Nu staat de div 50% weg van de bovenkant en 50% weg van de linker zijde. Als je goed kijkt kan je ook zien dat de linker bovenhoek in het midden staat van de pagina. Wat wij willen is dat de div in het middenstaat, en niet die hoek. Daarom gaan we de div met de helft van zijn lengte naar boven trekken, en met de helft van zijn breedte naar links. Zo dus.

.container {
position:absolute;
width:500px;
height:300px;
top:50%;
left:50%;
background-color:black;
margin-left:-250px;
margin-top:-150px;
}

Nu staat de div volledig in het midden van je pagina. Let er wel op dat de margin-left steeds de helft is van de width en de dat de margin-top steeds de helft is van de height. Dan zou alles vlotjes moeten verlopen.