Centralizar suas páginas web com CSS: como deixar o site sempre no centro com folhas de estilo
27/08/200827 comentárioscss
Folhas de estilo vieram para facilitar a vida de desenvolvedores web, quanto a isso não há dúvidas. Dúvidas, mesmo, são em relação a algumas técnicas CSS para alcançar determinados posicionamentos e resultados como, por exemplo, como deixar um site sempre no centro usando as folhas de estilo. Pode parecer que é algo complicado de fazer e/ou que se trata de uma técnica CSS mais complexa; para a felicidade de quem mexe com CSS, tanto novatos quanto veteranos, colocar um site sempre no meio com as folhas de estilo em cascata é simples de ser feito.
Tão simples que, na verdade, existem diversas maneiras de se centralizar um site em qualquer resolução de tela usando CSS. São técnicas variadas, que, quando aplicadas, produzem o mesmo efeito esperado – de centralizar uma página web ou site completo. Como todas as técnicas servem para a mesma coisa, fica “a gosto do freguês” escolher qual utilizar.
Centralizar site com CSS: posicionamento relativo e margens automáticas
Esta é uma das mais simples técnicas para alcançar o efeito de o site ficar sempre no centro, independentemente da resolução de tela do visitante.
Basicamente, deve haver uma div principal, que “englobará” o restante das divs do site. Geralmente os desenvolvedores costumam denominá-la “wrap”, “principal”, “site”, “all” ou algum outro nome que designe que esta é a div “externa” do site; a “casca” que está sempre ao centro. Como as outras divs ficam como sendo descendentes, a “mágica” acontece.
#wrap { width:750px; /* largura fictícia */ margin:0 auto; }
Para quem não sabe, a declaração de margin indica que as margens superior e inferior serão “0″ e as margens esquerda e direita serão calculadas automaticamente; ou seja, o site fica centralizado!
Centralizar site com CSS: posicionamento absoluto e margem esquerda negativa
Também é possível centralizar todo um site através de posicionamento absoluto. Para tanto, vamos utilizar a mesma div “wrap” como exemplo.
#wrap { left:50%; margin-left:-375px; /* metade da largura fictícia */ position:absolute; width:750px; }
Quando alguma div tem posicionamento absoluto, ela se baseia em seu elemento pai para se posicionar. No caso, como ela não tem elemento pai, então vai se basear na página, em si – body. Então, para conseguir o efeito de centralização, jogamos uma margem esquerda de 50%, para que vá para o meio. Mas é o limite da esquerda da div “wrap” que foi jogada 50% neste sentido; então, para que o centro da página é que fique no meio, aplica-se uma margem negativa da metade do valor total da largura.
Qual das duas técnicas de centralizar o site é melhor?
Como disse, qualquer uma das técnicas CSS para centralizar um site pode ser usado; ambas produzem efeitos semelhantes. A diferença principal é que uma atribui um posicionamento relativo à div principal e a outra um posicionamento absoluto. Isso, levando-se em consideração as divs filhas, tem um grande impacto na composição do layout, como um todo.
Mas isso é assunto para um outro artigo… ;-)
João S Magalhães (27/08/2008)
Cheguei no sei blog, via Blogblogs. O tutorial caiucomo uma luva para mim.
Abs
Tárcio Zemel (28/08/2008)
@ João S Magalhães
Que bom que você pôde aproveitar este tutorial, João! Espero que dê tudo certo na implementação e vamos usar os conhecimentos para o bem e com sabedoria!
Abraços e apareça! ;-)
Felipe (28/08/2008)
Eu estava quase arrancando meus cabelos tentando fazer isto. Obrigado!
Tárcio Zemel (28/08/2008)
@ Felipe
hehehe… Não se desespere, colega; fique ligado no desenvolvimento para web para saber de outras dicas! ;-)
Abraços!
Douglas Prado (10/09/2008)
Parabéns tutorial, me quebrou um galho, estou começando a aprender CSS e fico agradecido pois esse tipo de exemplo ajuda muitas pessoas. abraços
Tárcio Zemel (12/09/2008)
@ Douglas Prado
Que bom que lhe foi útil, Douglas! Fique ligado em mais tutoriais e apareça sempre! Abraços!
Felipe (24/09/2008)
É incrível como o margin:0 auto; nao funciona no IE. este navegador só me faz raiva cara. a microsoft podia ser um pouco menos negligente
Willian (29/10/2008)
Cara, muuuuuuuuuuuuito obrigado, obrigado mesmo, tipo eu fiquei dias tentando aquele outro esquema, de alinhar pela margin auto, e nunca dava, agora alinhei pelo margin absoluto, nossa, puts to muito feliz mesmo, obrigadao mesmo.
Nem sei como te agradecer.
Tárcio Zemel (29/10/2008)
@ Willian
De nada, Willian! Fico feliz que tenha conseguido alcançar o efeito que desejava em seu blog! Tomara que tudo o mais dê certo!
Grande abraço e obrigado pela visita!
Chris Benseler (13/11/2008)
Quase sempre eu utilizo a segunda técnica. Sempre tive problemas com a primeira por causa do posicionamento relativo.
Ferrer (21/01/2009)
Nossa! tutorial perfeito! realmente adorei, funcionou direitinho, e para o meu nnovo la via ficar perfeito!!! Muito Obrigado e seu site está nos meus favoritos agora =D
Tárcio Zemel (26/01/2009)
@ Ferrer
Muitíssimo obrigado! Espero que seu site fique cada vez melhor! Fique ligado nas próximas dicas! Abraços!
Darkila (03/03/2009)
O primeiro código não funcionou, mas o segundo funcionou, sei lá porque, no meu css já tinha coisa então não sei.
Muito Obrigada.
Era só isso que faltava nas minhas páginas!!
Suuuuuuuper beijo!
Tárcio Zemel (04/03/2009)
@ Darkila
É, deve ser algo no CSS já existente que não deixou efetivar o código da primeira técnica. Mas o importante é que funcionou! Obrigado por comentar e volte sempre!
Rafael Hernandez (11/03/2009)
Muito bom, gostei da matéria…
faloww
Acelio Filho (11/03/2009)
Gente!
Descobri sem querer outra técnica.
testei no IE6.0, Firefox 3.1 e Opera 9.5
Especificar a largura do body e as suas margens, deixando o conteúdo dele (tudo) centralizado e com a largura especificada nele.
body {
width: 700px !important; /*largura fictícia – o !important é para o IE 6.0 */
margin: 20px auto; /* margem do topo e base fictícias – margem da direita e esquerda AUTO */
}
Uma das vantagens de usar isto é que o conteúdo vem renderizando gradativamente e eliminamos o tempo de espera de carregamento com a Tela branca
Quando usamos uma grande div wraper com tudo dentro dela, estamos usando o mesmo princípio de layouts feitos com tabelas. Envolver todo o conteúdo dentro de uma tag. O navegador precisa ler a tag de fechamento desta div wraper para mostrar o que tem dentro dela, ou seja, tudo. E durante este tempo, ficamos olhando a tela em branco.
Tárcio Zemel (12/03/2009)
@ Rafael Hernandez
De nada, Rafael! Apareça!
@ Acelio Filho
Ah, legal essa técnica que você desenvolveu! Obrigado pela contribuição e por comentar! Volte sempre!
André (27/05/2009)
Ótima dica! Resolveu meu problema num projeto aqui. Abraço !
Tárcio Zemel (27/05/2009)
@ André
Ótimo que te ajudou! Bom, mesmo, é quando o que eu coloco no blog é útil! ;-)
Abraços e volte sempre!
Marcos Dias (27/08/2009)
Valeu mesmo, eu tambem estava quebrando a cabeça para conseguir centralizar minha pagina pois sou iniciante..
Danielle Toldo (20/11/2009)
Esse foi o único site em que encontrei uma explicação completa e coerente de como centralizar com css. Em outros sites e fóruns, eles simplesmente “jogam” a informação e vc se vira quebrando a cabeça e se estressando.
Muito Obrigada!
Tárcio Zemel (22/11/2009)
@Marcos Dias
De nada, Marcos! Aguardo você para os próximos artigos! ;-)
@Danielle Toldo
Que bom que o artigo foi útil, Danielle! Eu tento fazer bem explicadinho justamente para ficar fácil de entender.
Abraços e volte sempre!
Wecsley Martins (29/01/2010)
Olá!!! Não estou conseguindo centralizar, pois montei meu site todo no dreamweaver utilizando layers. Não utilizo muito o CSS. Em que lugar eu posso inserir o código? Tentei inserir no início do site onde aparece a área destinada a CSS, mas nao funcionou.
#wrap {
left:50%;
margin-left:-375px; /* metade da largura fictícia */
position:absolute;
width:750px;
}
Grato,
Tárcio Zemel (02/02/2010)
@ Wecsley Martins
É, aí complica um pouco, já que não sei que tipo de sujeira o Dreamweaver inseriu no código… Comece uma página nova e faça manualmente o que consta no artigo que tenho certeza de que funciona! Obrigado por comentar!
Nelson Gomes Leal (20/02/2010)
Cara, me salvou ai, pow, ja tava pensando em refazer o site todo em tabela e alinhar, mas nao gosto de fazer em tabela, PERFEITO POST!