desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web

  • Feed artigos
  • Feed comentários
  • Feed por e-mail
  • Início
  • Ferramentas
  • Downloads
  • Feeds
  • Mapa do blog
  • Sobre

Centralizar suas páginas web com CSS: como deixar o site sempre no centro com folhas de estilo

27 de agosto de 2008 12 comentários

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.

Exemplo de centralização de site com CSS.

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… ;-)

Categorias
css
Indicar artigo
x

 





Indicar artigo
Comentários RSS
Comentários RSS
Trackback
Trackback

Todo desenvolvedor web deve ler

Use a cabeça: HTML com CSS e XHTML. Criando página web com CSS. Usabilidade na web. Não me faça pensar. Design para a internet.

Artigos relacionados a "Centralizar suas páginas web com CSS: como deixar o site sempre no centro com folhas de estilo"

  • CSS float: considerações, dicas e macetes para bons layouts na web
  • Aprenda o posicionamento CSS em 10 passos
  • Efeito gradiente (degradê) em texto com CSS
  • “Divmaníaco”: saiba se o desenvolvedor de um web site é um divmaníaco
  • SEO Cheat Sheet - resumão de otimização de sites para mecanismos de busca
  • Sobre link para página inicial
  • Cursos de desenvolvimento para web em Juiz de Fora, Minas Gerais
  • “Sexy Buttons” em menus do Wordpress
  • Compatibilidade CSS e o Internet Explorer: tabela comparativa de compatibilidade CSS/IE
  • SEO para designers: os erros mais comuns na otimização de sites

12 comentários em "Centralizar suas páginas web com CSS: como deixar o site sempre no centro com folhas de estilo"

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.

  • domelhor.net
    Trackback em 27 de agosto de 2008
  • websapiens.net
    Trackback em 27 de agosto de 2008

Comente!

Translator

Portuguese flagItalian flagChinese (Simplified) flagEnglish flagGerman flagFrench flagSpanish flagJapanese flag

Artigos mais visitados

  • Briefing para desenvolvimento de web sites: considerações, dicas e modelos
  • 10 fontes de inspiração para fazer logotipos de qualidade
  • CSS float: considerações, dicas e macetes para bons layouts na web
  • Centralizar suas páginas web com CSS: como deixar o site sempre no centro com folhas de estilo
  • Baixar ícones de alta definição e qualidade

Categorias

  • (x)html (5)
  • acessibilidade (4)
  • blogs (7)
  • css (17)
  • design (31)
  • firefox (6)
  • indicações (50)
  • javascript (5)
  • jquery (8)
  • miscelânea (30)
  • php (7)
  • séries (9)
  • seo (12)
  • usabilidade (8)
  • wordpress (20)

Eu indico

  • ChromeBrasil
  • Fique Rico
  • Insistimento
  • Maikel Neris
  • Professional Blogger



Artigos Recentes

Ícones de setinhas para download (grátis)

Componentes de um sistema de navegação

10 fontes de inspiração para fazer logotipos de qualidade

Richard Stallman e os programas baseados na web

Meta tags

"Sexy Buttons" em menus do Wordpress

Últimos Comentários

Paulo Faustino: Faz tempo que não actualizava o blog, mas valeu a pena esperar amigo Tárcio. (...)

Rodrigo: Olá Tárcio, tudo tranquilo? Então, muito bom o exemplo. Agora estou com uma dúvida: Tenho (...)

Edgar: Gostei muito do artigo.! Me ajudou muito na criação de meu portifolio. parabéns pelo se trabalho (...)

de musicas: boa.... valeu pela dica... (...)

Viana: Muito boa a dica do plugin ;D (...)

Mais Comentados

Meta tags (16)

CSS float: considerações, dicas e macetes para bons layouts na web (15)

Google Chrome - primeiras impressões sobre o navegador da Google (14)

Como montar um portfolio sem ter clientes (13)

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade (13)

desenvolvimento para web trata sobre padrões da web, usabilidade, acessibilidade,
web design, SEO e tecnologias web, tais como HTML, XHTML, CSS, javascript, jQuery, PHP e mais.

A tradução automática é do Wordpress Global Translator Plugin e há alguns direitos reservados.