Centralizar verticalmente com CSS

Uma coisa bem legal que podemos fazer com CSS é centralizar um box na tela!

Muito útil!

Código HTML

texto centralizado

CSS

body {margin:0px;}
#janela {width:516px; height:380px; background:red; position:absolute; top:50%; left:50%; margin-left:-258px; margin-top:-190px}

.inside {

font-family:Arial, Helvetica, sans-serif; color:#333333;

width:400px;

margin-left:50px;

margin-top:100px;

}

Apenas um exemplo, mas podemos notar que a div janela é fixa e com posição absolut!

E pra ficar centralizado? Simples 50% left e 50% top!

Certo, mas me explica tudo... Por que estas margens negativas???

O ponto 0(zero) das divs, boxes, etc, é seu canto superior esquerdo, então, quando definimos 50% top e 50% left, o canto inferior esquerdo fica centralizado, mas o meio do box não!

Então, colocamos a margem superior negativa, tendo a metade do tamanho do box, para assim ficar centralizado! O mesmo se dá para a margem negativa a esquerda!

Ou seja neste caso o "width é 516px e height: 380px", então a metade disso, colocada nas margens negativas é "margin-left:-258px; margin-top:-190px".

Duvidas?