Introdução
Nota: Se você está à procura de uma técnica CSS para centrarhorizontalmente uma página na tela consulte este tutorial.
Neste tutorial vou mostrar a técnica CSS para posicionar um objeto ou uma página com altura definida no meio da tela do monitor do usuário, ou seja centrar na horizontal e na vertical, independente da resolução. Ao final da leitura desse tutorial você estará capacitado a posicionar com uso das CSS um objeto em qualquer lugar na tela, do monitor do usuário.
Posicionando uma imagem
Vou iniciar mostrando como posicionar uma imagem na tela. Usarei a imagem abaixo que nomeei de logo.gif
:
O código HTML que coloca a imagem na tela é mostrado a seguir.
1 2 3 |
<body> <img src="logo.gif" width="220" height="80" alt="logo do site Maujor" /> </body> |
Página mostrando a renderização do código acima
Como você observou, a imagem está posicionada no canto superior esquerdo da tela com as margens superior (aproximadamente 20px) e esquerda (aproximadamente 10px) padrão, variando conforme o navegador usado.
Vamos a seguir atribuir um id
para a imagem e estilizar o posicionamento da id
. Escolhi o nome imgpos para o id
da imagem e o HTML agora é:
1 2 3 |
<body> <img src="logo.gif" width="220" height="80" alt="logo do site Maujor" id="imgpos" /> </body> |
As regras CSS para posicionamento.
A propriedade CSS que possibilita posicionar um elemento qualquer (no nosso caso o elemento img
que tem aid="imgpos"
) é a propriedade position
complementada pelas propriedades left
e top
. O valor absolute
para a propriedade position
quando declarado para um elemento X
controla a posição do elemento tomando como origem do sistema de coordenadas o canto superior esquerdo do primeiro box ancestral de X
que tenha sido posicionado com os valores fixed
, relative
ou absolute
(Ver o tutorial Posicionando relativamente o absoluto). Caso não exista um elemento ancestral posicionado, a origem do sistema de coordenadas será o canto superior esquerdo da tela.
A regra CSS mostrada a seguir posiciona de forma absoluta em relação ao canto superior esquerdo da tela o elemento com id="imgpos"
.
1 2 3 4 5 |
#imgpos { position: absolute; left: 90px; /* posiciona a 90px para a esquerda */ top: 70px; /* posiciona a 70px para baixo */ } |
Observe a figura explicativa.
Notar que regra CSS a definição da posição absolute
e das coordenadas (left
) que define o quanto a imagem dista da margem esquerda e (top
) que define o quanto a imagem dista do topo.
A referência, como já foi dito acima é o canto superior esquerdo da tela e o ponto que ocupa a posição definida é o canto superior esquerdo da figura ou elemento posicionado.
IMPORTANTE: Você poderá alterar as referências da tela e consequentemente da figura ou elemento posicionado, mudando as propriedades para right
e bottom
. E valem as combinações para os quatro cantos da tela.
1 2 3 4 |
left e top: referência é o canto superior esquerdo; left e bottom: referência é o canto inferior esquerdo; right e <code>top</code> : referência é o canto superior direito; right e bottom: referência é o canto inferior direito. |
Qualquer unidade de medida CSS pode ser usada para definir as coordenadas, inclusive medidas relativas como, por exemplo, porcentagens.
Assim é válido declarar:
1 2 3 4 5 |
#imgpos { position: absolute; left: 50%; top: 50% } |
Desafio:
Você seria capaz de interpretar a regra acima e imaginar qual a posição ocupada pelo logo na tela já que a regra diz: posicione 50% para a esquerda e 50% para baixo na tela.
Página mostrando a posição ocupada pelo logo
Era esta a posição que você imaginou? Ou imaginou a figura no centro da tela?
Lembre-se o ponto que está a 50% do topo e 50% para a esquerda é o canto superior esquerdo da figura.
A figura não está no centro da tela. Volte lá e confira!
Posicionando no centro da tela
Conseguimos posicionar o canto superior esquerdo da figura no meio da tela com os valores declarados em porcentagens. E agora, para que o CENTRO da figura ocupe o meio da tela basta arrastar a figura para a esquerda e para cima de um valor igual a:
para a esquerda: metade da largura da figura;
para cima: metade da altura da figura.
A figura é um retângulo de 220 x 80 e os valores para arrastar são:
para a esquerda: 220px/2 = 110px;
para cima: 80/2 = 40px.
A propriedade CSS que determina o afastamento em volta dos elementos é margin
.
Como a figura deve ser arrastada para a esquerda basta declarar uma margin-left
negativa! E o arrastar para cima consegue-se com uma margin-top
negativa!
Página mostrando o logo no centro da tela.
E o código completo da página para seus estudos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Posicionar um objeto na tela</title> <style type="text/css"> #imgpos { position:absolute; left:50%; top:50%; margin-left:-110px; margin-top:-40px; } </style> </head> <body> <img src="logo.gif" width="220" height="80" alt="logo de 220 por 80 pixel" id="imgpos"> </body> </html> |
Aplicando a técnica para uma página web
Você poderá aplicar esta técnica para posicionar uma página inteira no centro da tela. Isto só faz sentido prático quando a página tem altura reduzida e menor do que a altura total da tela. Se você tem uma página de entrada no site do tipo “Clique aqui para entrar” e que normalmente tem um design de dimensões reduzidas, poderá colocá-la no meio da tela com esta técnica.
Nota: A página que você vai visualizar foi desenvolvida com tabelas à maneira ultrapassada de projetar web sites. Usei um código HTML “ruim” apenas como ilustração da técnica, no entanto, ela é válida para sites desenvolvidos segundo os Padrõies Web.
Página de código ruim, exemplificando a técnica de centralização
O código fonte da página, mostra o uso da técnica.
Conclusões
Posicionar um elemento no centro da tela é uma tarefa bem simples com uso das CSS. Como você já deve ter concluido, usando esta técnica pode-se posicionar um elemento HTML em qualquer lugar na tela do usuário, tanto usando medidas absolutas como valendo-se de medidas relativas.
fonte: http://maujor.com/tutorial/meio_tela.php