Centralizando um elemento na vertical e na horizontal com posição absoluta

A técnica para centralizar um elemento tanto na vertical como na horizontal com position:absolute (posição absoluta) é muito simples e útil:

Na Horizontal

O código para centralizar um elemento na horizontal é:

#horizontal {
	width:600px; height:400px;
	padding:40px 0;
	position:absolute;
	top:0px; left:50%;
	margin-left:-300px;
	background-color:#fff;
	text-align:center;
}

1 – O elemento tem de possuir um valor de width fixo.
2 – O elemento tem de possuir a propriedade position:absolute.
3 – O valor da propriedade left tem de ser igual a 50%.
4 – O elemento tem de possuir a propriedade margin-left, o valor de margin-left é o valor da propriedade width dividido por 2, mas negativo. Quando o elemento tiver padding o mesmo tem de ser somado ao valor de width e dividido por 2.

Exemplo:
width:600px = margin-left:-300px;
width:600px + padding:0 40px = margin-left:-320px;

Demo

Na Vertical

O código para centralizar um elemento na vertical é:

#vertical {
	width:600px; height:400px;
	padding:40px 0;
	position:absolute;
	top:50%; left:0px;
	margin-top:-220px;
	background-color:#fff;
	text-align:center;
}

1 – O elemento tem de possuir um valor de height fixo.
2 – O elemento tem de possuir a propriedade position:absolute.
3 – O valor da propriedade top tem de ser igual a 50%.
4 – O elemento tem de possuir a propriedade margin-top, o valor de margin-top é o valor da propriedade height dividido por 2, mas negativo. Quando o elemento tiver padding o mesmo tem de ser somado ao valor de height e dividido por 2.

Exemplo:
height:400px = margin-top:-200px;
height:400px + padding:40px 0 = margin-left:-220px;

Demo

Na Vertical e na Horizontal

O código para centralizar um elemento tanto na horizontal como na vertical é:

#ambos {
	width:600px; height:400px;
	padding:40px 0;
	position:absolute;
	top:50%; left:50%;
	margin-top:-220px;
	margin-left:-300px;
	background-color:#fff;
	text-align:center;
}

1 – O elemento tem de possuir um valor de width e height fixo.
2 – O elemento tem de possuir a propriedade position:absolute.
3 – O valor da propriedade top e left tem de ser igual a 50%.
4 – O elemento tem de possuir a propriedade margin-left, o valor de margin-left é o valor da propriedade width dividido por 2, mas negativo. Quando o elemento tiver padding o mesmo tem de ser somado ao valor de width e dividido por 2.
5 – O elemento tem de possuir a propriedade margin-top, o valor de margin-top é o valor da propriedade height dividido por 2, mas negativo. Quando o elemento tiver padding o mesmo tem de ser somado ao valor de height e dividido por 2.

Exemplo:
width:600px = margin-left:-300px;
width:600px + padding:0 40px = margin-left:-320px;
height:400px = margin-top:-200px;
height:400px + padding:40px 0 = margin-left:-220px;

Demo