DIV centrado horizontal y verticalmente

Este es un dolorcito de cabeza con el que todos nos hemos encontrado :p
Aquí puedes verlo funcionando.

Aquí el truco:

#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;}