Centralizar suas páginas web com CSS: como deixar o site sempre no centro com folhas de estilo
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… ;-)
Cheguei no sei blog, via Blogblogs. O tutorial caiucomo uma luva para mim.
Abs
@ 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! ;-)
Eu estava quase arrancando meus cabelos tentando fazer isto. Obrigado!
@ Felipe
hehehe… Não se desespere, colega; fique ligado no desenvolvimento para web para saber de outras dicas! ;-)
Abraços!
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
@ Douglas Prado
Que bom que lhe foi útil, Douglas! Fique ligado em mais tutoriais e apareça sempre! Abraços!
É 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
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.
@ 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!
Quase sempre eu utilizo a segunda técnica. Sempre tive problemas com a primeira por causa do posicionamento relativo.
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
@ Ferrer
Muitíssimo obrigado! Espero que seu site fique cada vez melhor! Fique ligado nas próximas dicas! Abraços!
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!
@ 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!
Muito bom, gostei da matéria…
faloww
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.
@ 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!
Ótima dica! Resolveu meu problema num projeto aqui. Abraço !
@ André
Ótimo que te ajudou! Bom, mesmo, é quando o que eu coloco no blog é útil! ;-)
Abraços e volte sempre!
Valeu mesmo, eu tambem estava quebrando a cabeça para conseguir centralizar minha pagina pois sou iniciante..
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!
@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!
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,
@ 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!
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!
Olá,gostaria de saber se tem jeito de fazer um site no dreamweaver pela draw ap div para ela se ajustar na tela do usuario,centralizar a pagina,desse jeito que vc mostrou consegui fazendo pelo draw ap div,agora para a resoluçao tem jeito?Abs.
@ Nelson Gomes Leal
Muito obrigado, Nelson! Espero que consiga bons resultados com o plugin! Abraços!
@ Nathalie
Infelizmente não mexo com Dreamweaver, então não saberia responder… Mas espero que consiga fazer o que pretende! :-)
Muito bom tuto.
Obrigado
Boa tarde,
Gostaria de saber como faço para centralizar a pagina do Oscommerce (loja virtual)? Pois com o código não consigo alterar nada.
Muito Obrigada!
Muito bom. Obrigado pela ajuda.
@ Wellington Torrejais da Silva
Nada, rapaz, o que é isso… ;-)
@ Lívynna
Na verdade, esta é uma dica "genérica" e, para adaptar a sistemas específicos, é preciso analisar várias questões. De repente você encontra algo mais direcionado em fóruns de osCommerce… Boa sorte!
@ Féll Borges
Não por isso… Volte sempre!
Mt Bom!!! Cara coloquei o código no local certo e centralizou na hora.
Valeu mesmo!!!
@ Diogo
Que bom que foi útil, Diogo! Dê uma olhadinha geral no site que, tenho certeza, vai encontrar outros materiais de igual qualidade. Abraços e volte sempre!
ola tudo bem estou construindo meu site (http://www.morphineweb.com.br) no front page, eu sei que ele naum é muito bom mais eu axo mais facil trabalhar com ele. e naum concigo centarlizar ele. sera que vc tem alguma dica q funcione no front page?
muito abrigado desde ja.
Obs: se naum for pedir muito tem como vc me dizer onde devo incerir o codico.
valeu, um grande abraço.
Ola Tarcio,
Então eu ja utilizei em varios sites as duas formas porem utilo somento a forma n° 1, pois se a resolução do usuario for menor a que seu site esta, o site nao ira perde conteudo, pois ele ira criar barra de rolagem,se utilizar a segunda, o site não ira aparecer um pouco da parte esquerda do site, pois ele sempre ira ficar centralizado não importa a resolução
@ chacal
Infelizmente não sei como fazer isso no Front Page… Sugiro que você comece a aprender as linguagens antes de usar programas para trabalhar. Abraços!
@ Jeferson
Isso aí! Por isso planejar como será a dinâmica de apresentação do site ANTES de iniciar o desenvolvimento é tão importante.
Cara, realmente muito útil e de muita valia esse post…
Acredita que eu colocava sempre uma tag CENTER pra centralizar alguns tipos de conteúdo (incluso a div WRAP)… coisas de noob shaushuas…
Grande abraço cara, e parabéns pelo site!
Já add aqui nos favoritos ^^
Pequeno detalhe que reparei:
Ao que parece, o IE8 não centraliza a div wrap usando a 1ª técnica;
ôÔ browserzinho lazarentO henn :@ =/
Tomara que a MS corrija seus erros com o lançamento do IE9…
Odeio o IE, mas o fato é que realmente ele é o browser mais utilizado pelos usuários…
A quem interessar, a segunda técnica funcionou perfeito nele ;D
Abraços.
Olá meu caro, eu estou começando a aprender sobre css, e estou a muio tempo tentando centralizar minha página e a de clientes. Apesar desse ótimo tutorial eu não consegui pois não sei onde colar ou digitar o codigo que vc fez, no meu código ( eu fiz no photoshop e exportei para dreamwaever)eu gostaria de saber em que momento do meu codigo é que entra esse condigo que vc fez.
Espero que alguém possa me ajudar pois me será muito util essa informação… desde já agradeço à todos.
@ Sérgio Soares
Teoricamente, Sérgio, o tutorial apresentado não contempla sites feitos em editores WYSIWYG ou editores de imagens que geram códigos… Isso porque esses editores "sujam" os códigos gerados e não permitem que técnicas como as descritas sejam implementadas com sucesso.
Realmente você teria que, primeiro, estudar o básico de HTML e CSS para seguir adiante. Boa sorte!
"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… ;-)"
Gostaria de saber a implicação do posicionamento na composição do layout em consideração às DIVs filhas. O assunto para o outro artigo…
Esse artigo foi escrito? Por favor, me passa o link?
Obrigada pela atenção. ;o
Muito bom o blog!! =D
Uma dica para centralizar no IE:
No coloque o estilo:
text-align: center;
Entao tudo será centralizado, textos e a div wrap, depois na div wrap coloque o estilo: text-align: left;
Com isso o texto voltará ao normal sem tirar a centralização do wrap
resumindo…
body {text-align: center;}
#wrap {text-align: left;}
Valeu!!! =D~~~~
Oi meu site é http://www.adolescer.com.br alguém poderia dar uma olhada e me dizer como centrar em resolução maior !!!
@ Inna
O artigo é "CSS float: considerações, dicas e macetes para bons layouts na web". Abraços!
@ Pedro Amorim
Obrigado pela dica, Pedro! Apareça!
@ Moacir
Usando estas técnicas é possível centralizar o site para qualquer resolução, Moacir. Dê uma olhada com calma que você consegue! ;-)
Olha ajudou muito + muito mesmo, fiquei dois dias "fuçando" sites explicando mas não tava conseguindo entender ( sou design gráfico e não de web, sou novo no ramo, valeu mesmo.
Ola ja tentei todos os comandinhos e meu site naum centraliza em nenhum navegador pode me ajudar
Show de bola o desenvolvimento para web, achei simples mais com muito conteúdo legal !
Q q cê acha da gente fazer parceria (troca de banners ou links) procuro sites com um bom conteúdo pra fazer parceria, o objetivo disso é claro aumento de tráfego ^_^
Danilo Ramos – cssorbit.com
Danilo, agradeço imensamente o convite, mas troca de banners costuma não ser vista com "bons olhos" pelos buscadores… Mas com certeza fazer referências a bons conteúdos é algo bom de acontecer! ;-)
Abraços!
MUITO BOM • SIMPLES E EFICIENTE • PARABÉNS!!!
De nada Maycon! Espero que faça muitos projetos usando esta técnica.
Essas técnicas, teoricamente, funcionam em qualquer situação. Muito provavelmente é alguma outra regra CSS "ofuscando" o funcionamento correto.
Obrigado, César! Apareça sempre!
Parabens muito bom tutorial!"
É o que precisava, sou novo na área de desenvolvimento web, muito obrigado…
Sucessos sempre!
Que bom que agora está fazendo da maneira correta, pois usar este tipo de tag prejudica seu site.
Abraços!
Obrigado por compartilhar seus testes, Alessandro!
obrigado pela dica
ola eu estou tentando colocar arquivo em flash mas nao estou tendo sucesso
me ajuda por favor…. tem alguma manha ou programa mais facil
De nada! Apareça!
Você pode fazer um embbeded de arquivos flash sem problemas depois que a estrutura do site centralizado tiver sido feita com CSS. Basta fazer o que consta no tutorial e, na parte do conteúdo, inserir seu flash.
Agradeço muito pela ajuda!
Show…a opção 2 deu certinho no meu projeto ..ja tava perdendo os cabelos…detalhe ja tinha consultado em varios sites e não encontre a solução ….(add aos favoritos de certeza)
Eu é que agradeço pelo comentário. Abraços!
haha, que bom que agora funcionou, Marcos! Aproveita e assina o feed do blog, também. ;-)
Olá amigo, por favor me ajude, estou quase arrancando meus cabelos…
pois bem, consegui colocar minha ap div no centro porém possuo uma tabela detro da ap div, mas quero colocar mais alguma ap div's menores dentro desta ap div mãe, mas, fixas em um determinado lugar, ou seja, quando eu alterar minha pagina continue no lugar de inicio. tem como fazer isto? ( uso o Dreamweaver 5.5)
Valeu pelo post, muito bom!!
Desculpe, mas não sei mexer no Dreamweaver…
Eu é que agradeço a participação, Felipe!
Me ajudem a centralizar meu site, pois em cada computer ou notbook que acesso ele esta com uma configuração, em alguns esticado margem a margem , outros no centro….um horror…sou muitooo novata nesse assun to, mas estou sem $$$ para pagar um web designer, preciso de help…na minha css esta assim:
STRUCTURE
*************************************************************************************/
#bg {
background: url(images/top-illustration.gif) no-repeat center 0;
}
#pagewrap {
width: 978px; /
margin: 0 auto;
}
/* content */
#content {
margin: 40px 0 70px;
min-height: 400px;
O que devo inserir e onde…obrigada
Muito bom… Me salvou facinho…
Alguém29/08/2011
A segunda opção tem um defeito, já experimentou visualizar no iphone ou algum tablet? Ou mesmo minimizando o navegador, tente esticar e encolher a janela.
A dica não aborda design responsivo…
Centralizar o layout em margin auto é a melhor solução?
Eu tentei usar a primeira maneira, mas não deu certo, não sei por que. Então usei meu próprio jeito:
.all {
text-align: left;
width: 1000px;
height: 1158px;
top: 0px;
left: 10%;
position: absolute;
margin: 0;
padding: 0;
}
Você acha que desse modo, poderia haver algum problema (resoluções diferentes da resolução que eu uso, etc..)?
Ele está funcionando perfeitamente aqui em localhost.
Kelly, não diria que há uma "melhor" solução. Teoricamente, ambas fazem o que se propõem, mas, dependendo de seu estilo de código, uma ou outra pode se adequar melhor.
Abraços!
Acho que pode haver algum problema quando as pessoas acessarem em diferentes resoluções, sim, Tiago. Fora o fato de ter uma altura definida, também, então, se o conteúdo ocupar mais de 1158px, as coisas podem ficar estranhas…
Dê uma revisada no método 1 ou tente implementar o 2 que são garantidos! ;-)
eu naum consegui mais segui a dica de um comentário acima e consegui alinhar meu blogspot
vlw eu tinha esquecido
Rodrigo14/10/2011
Estou com um problema.
Quando abro meu site no firefox, todas as paginas do meu site ficam centralizadas, tudo certinho, mas quando abro pelo IE, tem algumas paginas que ficam pra esquerda, nao ficam centralizadas.
O que pode estar acontecendo???
Erros de CSS… Aconselho a fazer uma revisão geral nas suas folhas de estilo. Não é raro acontecerem problemas estranhos com o IE, portanto, não se preocupe tanto.
Preciso de ajuda urgentemente.
Estou a estagiar numa empresa para a qual construí o meu primeiro site.
Depois de pôr o site online vi que no INTERNET EXPLORER 9 o site não aparece como devia.
Já experimentei de tudo e não consigo resolver o problema, por favor ajudem-me.
(domingoslucas@live.com.pt)
Normal acontecerem essas incompatibilidades. Infelizmente, não é o caso para uma "dica rápida". É preciso analisar o código inteiro para perceber os erros e corrigí-los.
Vá buscando no Google sobre problemas com IE para cada um deles e os resolvendo um a um.
Abraços!
Olá!
Testei mas percebi um problema, -375px não está exatamente no meio, com -400px ae sim. Saberia me explicar pq?
Esquece já entendi… é margem irreal então tenho que calcular dependendo do grid… blzzz
Isso! ;-)
Valeu cara, me ajudou pra muito.
#center { position:absolute;
background:url(images/center.png);
top:33%;
left:10%;
width:742px;
height:700px;
em que estou errando? pois qnd dou zoom – no site vai uma div pra cada canto ;x
alguem pode ajudar?
Você tá usando uns valores meio aleatórios (e ainda em porcentagem). Então esse comportamento é esperado, mesmo. Dê uma lida melhor no artigo pra ver as técnicas, direitinho! ;-)