27 de dezembro de 2010

Centralizando seu site com CSS

Modo simples de deixar sua página sempre no centro da tela

Vamos utilizar um método, que na minha opinião, é o mais fácil para deixar o site sempre no meio da tela, não importando a resolução ou o tamanho da janela a página sempre fica no meio.

Primeiramente o HTML, teremos que criar uma div que envolva todo o site (como se fosse uma "casca") e nela colocaremos o id="centro". E dentro dela criamos mais uma div, com o id="wrap". Veja como ficou:

<div id="centro">
<div id="wrap">

</div>
</div>
(...)
Agora o CSS, para a nossa "div centro" colocamos float com o valor left, margin com o valor auto (para o cálculo automático da margem), width com o valor 100%, (o valor é em porcetagem por que assim a div ocupa a largura da tela inteira não importando o tamanho da janela ou a resolução do monitor) e border com os valores de 1px, solid e blue apenas para que você possa visualizar a div, coloque o valor em 0px se não quizer visualizar a borda.

Já para a "div wrap" colocamos margin com o valor auto e width com o valor de exemplo de 800px, e border com os valores de 1px, solid e blue (coloque o valor em 0px se não quizer visualizar a borda). Veja:

#centro{
        border:1px solid blue;
        float: left;
        margin:auto;
        width:100%;
       }

#wrap{
        border:1px solid red;
        margin:auto;
        width:800px;
       }

Pronto ! Agora dentro da div "wrap" você desenvolve sua página.

9 comentários:

  1. Olá Danilo.

    Parece que a imagem demonstra o contrário do contexto do código.
    #wrap deveria ser a caixa em azul (100%) e #centro a caixa vermelha (800px).
    E na explicação da div centro, você pede para o usuário colocar blue na borda, sendo que o código mostra red.

    É só isso, mas não tira o brilho da dica. Muito boa.

    ResponderExcluir
  2. @jdsantiago: Olá ! Obrigado pelo aviso, o problema ja foi corrigido.

    ResponderExcluir
  3. Estou entrando no ramo agora, o que realmente me irritava era a pagina não centralizar em todos os brownsers. Vlw pela dica e ótimo site!

    ResponderExcluir
  4. @FreemanRj: Obrigado! Boa sorte pra você na sua carreira como web designer.

    ResponderExcluir
  5. Não funciona no Internet Explorer 7 e 8.

    ResponderExcluir
  6. @Matheus: Funciona sim, vc deve ter feito algo errado !

    ResponderExcluir
  7. òtima dica, há quem coloque a div externa menor que os 100% da ágina, utilizando o "corpo" html diretamente para colocar, por exemplo, o background.

    Mas achei bem rpático usar o esquema #centro e #wrap. Valeu a dica que, mesmo simples, resolve o problema da centralização apenas colocando os valores em auto para as margens direita e esquerda. Por sinal, isso serve para alinhar ao centro qualquer div.

    Valeu.

    ResponderExcluir