Centralização horizontal e vertical

<style type="text/css">
        #box {
                width:600px;
                height:400px;
                position: absolute;
                top:50%;
                left:50%;
                margin-left:-300px;
                margin-top:-200px;
                background-color:#969696;
        }
</style>
<div id="box">
        Meu conteúdo 600 x 400 pixels</div>

A lógica é simples, as margens sempre são negativas e metade do valor da lateral.

Ou seja no caso acima.
largura: 600px / 2 = 300px = margin-left: -300px
altura: 400px / 2 = 200px p= margin-top: -200px 

Posted in: CSS