Centralização horizontal e vertical

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

<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>

Uma alternativa para encurtar o código é substituir a lógica horizontal por margin: auto;, lembrando que o primeiro valor da propriedade é o vertical, logo ficaria assim.

<style type="text/css">
        #box {
                width:600px;
                height:400px;
                position: absolute;
                top:50%;
                margin:-200px auto 0;
                background-color:#969696;
        }
</style>

<div id="box">
        Meu conteúdo 600 x 400 pixels
</div>

Muda pouca coisa mas ai você só se preocupa com a altura.

Baixar HTML