:: Posicionar um objeto ou página no centro da tela ::
Introdução
Neste tutorial vou mostrar a técnica CSS para posicionar um objeto ou uma página no meio da tela do monitor do usuário, ou seja centrar na horizontal e na vertical, independente da resolução usada. 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 é
............
<body>
<img src="logo.gif" width="220" height="80"
alt="logo de 220 por 80 pixel">
</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) default, variando conforme o browser usado.
Vamos a seguir atribuir uma id para a imagem e estilizar o posicionamento da id. Escolhi o nome imgpos para a id da imagem e o HTML agora é:
...........
<body>
<img src="logo.gif" width="220" height="80"
alt="logo de 220 por 80 pixel" 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 a id="imgpos") é a propriedade position complementada pelas propriedades left e top e que ao assumir o valor absolute, controla a posição do elemento tomando como origem do sistema de coordenadas o canto superior esquerdo da viewport.
Ops! complicou? Explico!
Observe as regras CSS para posicionar com left e top (esquerdo e superior ):
position: absolute;/* posiciona em
relação um canto superior esquerdo da tela */
left: 90px; /* posiciona a 90px para a esquerda */
top: 70px; /* posiciona a 70px para baixo */Observe a figura explicativa.
Notar que na regra CSS, ao definir a posição absolute utilizou as propriedades (left ) que define o quanto a imagem dista da margem esquerda e a propriedade (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.
left com top: referência é o canto superior esquerdo;
left com bottom: referência é o canto inferior esquerdo;
right com top : referência é o canto superior direito;
right com bottom: referência é o canto inferior direito.Qualquer unidade de medida CSS pode ser usada para posicionar, inclusive medidas relativas como são aquelas expressas em porcentagens.
Assim é válido declarar:
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-se 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.
<!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 para uma página web
Você poderá aplicar esta técnica para posicionar uma página toda no centro da tela. Isto só faz sentido prático em geral quando a página tem altura reduzida e não há barra de rolagem vertical. Se você por alguma razão tem uma página para entrada no site, daquele 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 (como são 99% dos web sites à época que este tutorial foi escrito).
Mostro este código "ruim", no entanto, a técnica é válida para sites web standards.
Página código ruim, exemplificando o conceito acima
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 está 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.
Última modificação: 2009/01/23 08:31:56 GMT
Criado em: 2004-06-20
