<!-- Centralição nos modos "relative" e "static" -->
 
<style type="text/css">
/* diferente do modo "absolute" centralização só ocorre na horizontal "X" pois no modo "relative" e "static" a div acompanham o fluxo da pagina faça um teste desabilitando o comentário da tag "p" abaixo */
#divQuadrada 
{
position:relative;
width:200px;
height:200px;
background-color: #333333;
/* margin com o valor de auto é a responsável pela centralização somente nos modos relative e static */
margin: auto;
}
body
{
background-color: #CCC;
margin: 0px 0px 0px 0px;
}
</style>
 
 
<!-- Centralição nos modos "absolute" e "fixed" -->
 
<style type="text/css">
/* Nos modos "absolute" e "fixed" centralização ocorre na horizontal "X" e vertical "Y" ignorando o fluxo da página, teste removendo os comentários da tag "p" abaixo. */
#divQuadrada 
{
position:fixed;
/* left em 50% posiciona a div pelo canto esquerdo no meio da página */
left:50%;
/* top em 50% posiciona a div pelo topo no meio da página */
top:50%;
width:200px;
height:200px;
background-color: #333333;
/* como a div fica alinhada pelo canto superior esquerdo no centro da página devemos subtrair através da propriedade margin metade do seu tamanho como realizado abaixo. */
margin-left: -100px;
margin-top: -100px;
}
body 
{
background-color: #CCC;
margin: 0px 0px 0px 0px;
}
</style>
 
<!-- tag&#039;s em html utilizada nos exemplos acima -->
 
<!-- <p>conteudo do seu site</p> -->
<!-- <p>conteudo do seu site</p> -->
<!-- <p>conteudo do seu site</p> -->
<!-- <p>conteudo do seu site</p> -->
<!-- <p>conteudo do seu site</p> -->
<!-- <p>conteudo do seu site</p> -->
<div id="divQuadrada"></div>