Olá a Todos.
Bom galera neste artigo ensinarei a centralizar um layout na vertical e na horizontal independente da resolução, para isso precisamos saber exatamente duas coisas.
- Tamanho do layout na Vertical [ height ];
- Tamanho do layout na Horizontal [ width ];
Explicarei o conceito depois coloco o código e se achar necessário coloco mais algum comentário no final do artigo. Bem vamos aos conceitos.
Para alinhar na horizontal já expliquei, veja este artigo Centralizando na Horizontal, mas para este alinhamento aqui muda um pouco o conceito. Nossa como eu enrolei, colocarei os passos para eu não me perder!
- Definir uma largura e uma altura [ width / height ];
- Posicionar o elemento absolutamente [ position ];
- Definir onde o elemento deve ficar em relação ao topo e a esquerda [ top / left ];
- Definir as margens do topo e da esquerda [ margin-top / margin-left ];
Bom agora que definimos o que fazer, vamos ao código xHTML.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Centralizando Layout na Vertical e na Horizontal by aprendacss.wordpress.com</title>
<style type=”text/css”>#tudo {
width: 500px;
height: 500px;
background-color: #00F;
}</style>
</head>
<body>
<div id=”tudo”></div>
</body>
</html>
Pronto desta forma já criei a div#tudo porém ela está posicionada na esquerda, agora vamos incrementar o código aos poucos, para ver o que acontece! Primeiro incremento, posicionar absolutamente, nada acontecerá, então vamos colocar mais alguns elementos, e seguindo nossa orderm agora vem os posicionamentos referente a topo (top) e esquerda (left).
#tudo {
width: 500px;
height: 500px;
position: absolute;
top:50%;
left:50%;
background-color: #00F;
}
Nossa o que aconteceu aqui!? :/
Calma vamos entender. position: absolute; “coloca” o elemento onde mandarmos e para onde nós mandamos ele? Cuidado com a resposta. 
Bem nós mandamos ele ficar à 50% do topo e à 50% da esquerda, e é exatamente a onde ele está tente redimensionar a janela e verá para onde ele irá. [ ele não pode mudar muita coisa não, tem que ficar a 50% do topo e da esquerda de acordo com o tamanho da janela que você deixou ]
Bom agora que ele está a 50% do topo e da esquerda, vamos alinhá-lo utilizando as margens.
#tudo {
width: 500px;
height: 500px;
position: absolute;
top:50%;
left:50%;
margin-top: -250px;
margin-left: -250px;
background-color: #00F;
}
Nossa ele ficou bem no meio, que legal! Vamos entender o porque de definir margem negativa!
Quando definimos uma margem queremos que ela exatamente tenha um espaço de um lugar, se definirmos um valor negativo, ela fará justamente o contrário, ela se aproximará mais do local.
Ok! Entendi, mas porque -250px? Bem se você está se perguntando isso, responderei para você, mas farei você pensar junto comigo. Está disposto a isso? Então vamos lá!
Defini o tamanho do meu layout sendo um quadrado de 500px de largura por 500px de altura, isso é óbvio pois é um quadrado e quadrado tem que ter os lados iguais, mas vamos continuar com o artigo, após isso defini que ele deveria ficar há 50% do topo e 50% da esquerda, mesmo que você não tenha prestado muita atenção, deve ter notado que o tamanho do quadrado está em pixel e o posicionamento em porcentagem. Bom já que a margem negativa aproxima ao invés de afastar se eu defini-la com pixels, eu estou aproximando ela do topo e da esquerda, por isso que ela fica bem no meio.
Ah! Agora eu entendi! Pelo menos eu acho!? Como eu faria se fosse um layout com 700px de largura por 400px de altura ?
Simples, essa margin-left deve ser o valor do width: dividido por 2, e a margin-top deve ser o valor do height dividido por 2. LEMBRANDO QUE SEMPRE NEGATIVOS.
Para ver o resultado acima, altera o código da div#tudo para esse:
#tudo {
width: 700px;
height: 400px;
position: absolute;
top:50%;
left:50%;
margin-top: -200px;
margin-left: -350px;
background-color: #F00;
}
Bom é isso ai pessoal!
Se ainda tiverem dúvidas, não se acanhem, podem postar a vontade.
Até o próximo.
Mandou bem kra… parabéns
Por: Samuel em 8/Ago/2008
às 14:26:08
Muito obrigado.
Espero poder postar sempre.
Valeu
Por: Paulo Fernandes em 12/Ago/2008
às 17:10:47
Paulo,
Eu construir meu layout para uma resolução de 1024X768 com lefts e tops definidos na modo absolute. Agora!Quando eu abro meu site numa resolução maior que 1024 ele não fica centralizado, e sim todo a esquerda.
Tentei coloca-lo dentro de uma tabela e centraliza-lo ou dentro de uma div da forma que vc mostrou neste artigo, mas o layout não se mexe. Acredito que seja pelo fato de ter lefts definidos. Vc pode me ajudar com essa? Obrigado.
Por: Marcelo Braga em 19/Set/2008
às 21:21:12
@Marcelo Braga
Posso tentar te ajudar, mas você precisa me enviar o código. Posso te dizer que o problema pode ser outra regra CSS que está sendo sobreescrita. Reveja o seu CSS e qualquer coisa, acesse o http://forum.imasters.com.br e poste sua dúvida lá concerteza o pessoal te ajudará!
abraço
Por: Paulo Fernandes em 21/Set/2008
às 00:51:57
Boa Tarde.
Costumo centralizar meus sites da seguinte forma:
defino no body um “text-align: center” para centralizar tudo que tem dentro dele, e a div #tudo (que contem o site inteiro dentro) coloco um “margin: 0 auto” definindo assim que a div #tudo fica com margin zero para o topo o chão e margem automatica nas duas laterais.
Para evitar que o restante dos elementos do site assumam o text-align: center, aí uso dentro da dv #tudo um text-align: left, que faz tudo voltar ao padrão, alinhando a esquerda.
Abração!
Por: Ewaldo em 22/Out/2008
às 16:27:09
Caro Ewaldo
Dessa forma você centraliza na horizontal, mas não na vertical, tenho este post aqui do layout na horizontal que faz exatamente como você disse
link: http://aprendacss.wordpress.com/2008/06/25/centralizando-layout-na-horizontal/
abraço
Por: Paulo Fernandes em 22/Out/2008
às 17:09:32
O mundo precisa de pessoas assim, dispostas a ajudar o próximo, sem pensar a quem, PARABÉNS ótimo tópico, continue assim.
Por: Leonardo Marriel Jr em 5/Jan/2009
às 10:49:17