:: Posicionar um objeto ou página no centro da tela ::

Este tutorial foi atualizado em: 13/03/2011

Introdução

Nota: Se você está à procura de uma técnica CSS para centrar horizontalmente 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:

logo de 220 por 80 pixel

O código HTML que coloca a imagem na tela é mostrado a seguir.

<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 é:

<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 a id="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" .

#imgpos {
	position: absolute; 
	left: 90px; /* posiciona a 90px para a esquerda */ 
	top: 70px; /* posiciona a 70px para baixo */
	}

Observe a figura explicativa.

Mostra um logo no meio e as distâncias conforme o código acima

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.

left e top: referência é o canto superior esquerdo;
left e bottom: referência é o canto inferior esquerdo;
right e top : 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:

#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.

<!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.

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil

Criado em: 2004-06-20