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;
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;
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;
2 respostas a "Centralizando um elemento na vertical e na horizontal com posição absoluta"