logo
  Div vakje centreren
  Als je een div precies in het midden wilt hebben, dan gebruik je deze tag:

.vakje {
position:absolute;
width:100px;
height:70px;
top:50%;
left:50%;
background-color:#90C020;}

<div class="vakje">tekst</div>

Maar dan kom je snel op een probleem uit:

Ik heb hier als voorbeeld een groen vakje genomen. En wat zie je... hij is niet gecentreerd op het vakje, maar op de hoek rechts beneden!
Als je nu de tag even veranderd in:

.vakje {
position:absolute;
width:100px;
height:70px;
top:50%;
left:50%;
background-color:#90C020;
margin-left:-50px;
margin-top:-35px;}

Je neemt de helft van de breedte en de helft van de hoogte en die zet je er even bij en hij staat dan precies in het midden:

wat ook leuk kan zijn 2 divs in elkaar maken:

div.buiten
{
position: absolute;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin-left: -75px;
margin-top: -75px;
background-color: #6699CC;
}
div.in
{
position:absolute;
left: 50%;
top :50%;
width: 140px;
height: 140px;
margin-left: -70px;
margin-top: -70px;
background-color: #99CCFF;}
<div class="buiten">
<div class="in">
<center>tekst</center>
</div>
</div>
 
eind