Conheça também: Onmasters . Ofertas . Divulgue! . Vai.la . Geraboleto . Baixa.la . Assista.la . Bloghost
» Início » Desenvolvimento » CSS e Tableless » Centralizar a Pagina na horizontal e vertical -->
 
Avaliação: | Publicado em: 09/02/2007
Centralizar a Pagina na horizontal e vertical
Leonardo L Procopio (mas pode me chamar de Léo!). Sou tecnico de Informatica, faço curso de Analise e Desenvolvimento de Sistemas e trabalho com desenvolvimento em Delphi. Mas tenho uma grande paixão por web, e por isso sou um grande estudante de suas tecnologias. Meu objetivo e transmitir o que sei de forma simples e descontraida!


Salve Programadores!!!

Ultimamente tenho tido varias pessoas me add no msn com a seguinte duvida:

 "Como faço para centralizar a pagina tanto na vertical quanto na horizontal?"

Observando que as pessoas que estão começando agora tem dificuldades em lidar com isso, eu resolvi escrever esse artigo pra dar uma certa ajuda!

Então vamos começar...

Um belo dia, você acorda e pensa em colocar uma caixa na sua pagina, mas você gostaria de deixar essa caixa no centro absoluto, começa a rabiscar alguns códigos e nada!

 Antes de abandonar o seu layout sonhado, eu lhes apresento uma solução bem simples.

 Suponhamos que esse bloco tenha as seguintes dimensões: 300 de largura (width: 300px) e 200 de altura (height: 200px;).
O esqueleto de nosso código ficaria assim:
--------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
        <title>Centralizando</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
      <div id="principal">
                <strong>Artilheiros Brasileiros,  Bravos São!!!</strong>              
      </div>
</body>
</html>
--------------------------------------------------------------------------

Até aqui tranquilidade, certo?

Agora vamos colocar os comandos css que irão formatar a aparência de nosso bloco, e deixa-lo no centro!

#principal {
    width: 300px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50% 
    background: #f7f7f7;
}  

Uma explicação básica sobre o que estamos fazendo:

    O primeiro comando é o width: 300px, ou seja, a largura do nosso bloco;

    O segundo comando é o height: 200px, que vem a ser a altura do nosso bloco;

    O terceiro é o position: absolute, que vem define qual tipo de posição o nosso bloco vai!! (essa é boa!)

    O quarto é top: 50%, que diz que o nosso bloco, vai ficar no meio, em relação do top da área do navegador até a parte de baixo;

    O quinto é o left: 50%, que diz que o nosso bloco, vai ficar no meio, em relação a esquerda da área do navegador até a parte da direita;

    O sexto é o background: #f7f7f7, que somente da uma cor no bloco!


Faça um teste e veja que alguma coisa ainda não esta bem certinha...
--------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
        <title>Centralizando</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style>
             #principal {
                    width: 300px;
                    height: 200px;
                    position: absolute;
                    top: 50%;
                    left: 50%; 
                    background: #f7f7f7;
             }  
       </style>
</head>
<body>
      <div id="principal">
                <strong>Artilheiros Brasileiros,  Bravos São!!!</strong>              
      </div>
</body>
</html>
--------------------------------------------------------------------------

Bom, você notou que o bloco não testa totalmente no centro. Isso é porque nos definimos para que ele fique assim!
Onde? Olha o código:
#principal {
                    width: 300px;
                    height: 200px;
                    position: absolute;
                    top: 50%;
                    left: 50%; 
                    background: #f7f7f7;
             }  
ou seja, a ponta esquerda superior do nosso bloco vai ser alinhada no centro absoluto (top: 50% e left: 50%). Mas não era bem isso que você esperava né? Calma, ainda não acabou!

 Vamos acrescentar dois novos comandos lá, mas antes vou te explicar qual é a missão:

 Temos um bloco de 300px por 200px, e notamos que no centro de tudo, ele esta usando a ponta esquerda superior como referencia. Então pra usar o centro do bloco (div) como referencia nos ter que jogar a metade da largura pra esquerda e da altura pro topo:

        margin-top: -100px;
        margin-left: -150px;

Essas margens negativas (-), estão jogando nosso bloco 150px p/esquerda, e 100 p/direita! Compensando assim o top: 50% e left: 50%!!!

 Muito simples e fácil!

Caso você queira alterar o tamanho do bloco, basta não esquecer de alterar também os valores da margin-top e margin-left (lembrando sempre que margin-top tem que ser a metade do valor da altura do bloco, e margin-left a metade da largura do bloco!)

Testem ai:
--------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
        <title>Centralizando</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style>
             #principal {
                    width: 300px;
                    height: 200px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    background: #f7f7f7;
                    margin-top: -100px;
                    margin-left: -150px;
                   
             } 
       </style>
</head>
<body>
      <div id="principal">
                <strong>Artilheiros Brasileiros,  Bravos São!!!</strong>             
      </div>
</body>
</html>
--------------------------------------------------------------------------


msn: leonardomerce@hotmail.com
Rio de Luz
Então fica mais uma dica ai pra quem ta começando!!!
Grande abraço, e até a próxima!!

claudio da silva <hallakdesign@yahoo.com.br>
olá leonardo... estou com um problema básico....

preciso centralizar o site em qualquer padrão/munitor isso é possível e veja as medidas do meu conteúdo 900 x 375
Leonardo Procópio
Claudio, é sim, basta vc substituir os valores que estão no exemplo pela metade dos seus, tenta ai, qualquer coisa tu me fala!
Grande abraço!
haha, cara, muito bom!
meu cérebro já não é lá aquelas coisas, não conseguiria pensar nisso aheuhauehae, valeu mesmo, vai ajudar e muito.

Só uma pergunta: Vamos supor que a minha div geral tenha 700x500. Para centralizar ela? ò.Ô

É cara, meu cérebro é uma desgraça haeuhauhe.
Abração!
Jean (de novo) <contato@g-unitdesign.com.br>
ah ta, tem ali o texto explicando como é que fica =

já resolvi aqui, tudo certo! =D
Uma dúvida...
E quando o espaço de vizualiação do navegador for menor que a altura do div #principal ? Fica sem a barra de rolagem.
Exemplo: A div tem 800px de ALTURA, e a pessoa utiliza 800x600 de resolução...
Tem solução ?!

Um abraço.
Leonardo L Procópio <leonardolp@gmail.com>
Isso Luiz, se a tela for menor que a div, ele não vai mostra a barra de rolagem.
Ele centraliza quando a resolução for maior.
Muito bom cara, resolveu meu problema, eu tinha ate encontrados parecidos com este, mas so o seu que funcionou corretamente. Valeu cara...
e se tiver outros layers q precisem ficar centralizados em cima do geral?
Leonardo L Procópio <leonardolp@gmail.com>
Isabella, como assim?
Se tu quiser centralizar algo que esteja fora do geral, basta adaptar o código.
Seria isso?
Eldon Pinheiro <eldonpinheiro@gmail.com>
N funcionou no Firefox : Não avaliado
Leonardo L Procópio <leonardolp@gmail.com>
Opa Eldon! Tu fez da forma que esta no exemplo ?
Grande abraço!
Cristiano Teixeira <cristianoteixeira@globo.com>
Excelente código, cara. Simples e muito útil.
Parabéns!
Seu código funcionou legal no IE 6 e no Firefox. Porém, estou na verdade à procura de um código que centralize uma página COM barra de rolagem. Por exemplo, se você modificar o valor do seu código p/ um valor maior que 800px de largura e fazendo as devidas alterações nas margens que devem ser igual ao raio da DIV, você verificará que o bloco alinha na esquerda e apresenta uma barra de rolagem à direita. Você conhece alguma solução em que a página fique no meio COM a barra de rolagem? Novo desafio, hehe.
Leonardo L Procópio <leonardolp@gmail.com>
Marcelo, não compreendi muito não, me passa mais detalhes!!
Grande abraço!
Alexandre <ipero@terra.com.br>
Gostei muito do tutorial. O Senhor conseguiu ser bem didático.
Obrigado!
Leonardo L Procópio <leonardolp@gmail.com>
Opa Alexandre!! blzinha brother, vlw pelo comentario!!
Grande abraço!
Pedro Antunes <p_geral@iol.pt>
ola! olha deste-m uma ajuda espectacular com este artigo! ja tava para deixar d fazer a nha pagina mas tu salvaste-me!!!! obrigadão!!!!!!!!!! és um genio!!!!! VALEU CARA ;) ;)
Leonardo L Procópio <leonardolp@gmail.com>
Vlw Pedro!!
Grande abraço brother!
Fernando Lourenço <fazimagem@gmail.com>
Obrigado Leo pela sua explicação de como centrar na Horiz e Vertical.
Eu também sou um apaixonado pela web. Já tenho 58 anos (pena não serem 18 que ainda ia aprender programação), mas só já em velhote é que encontrei o que gosto mesmo de fazer. Um abraço - Fernando Lourenço - Lisboa

Leonardo L Procópio <leonardolp@gmail.com>
Fala ai Fernando!! Achei muito legal o seu comentário, parabéns pelo espirito de busca!! Isso que acho show de bola! Nunca é tarde pra fazer algo que realmente gosta né!
Grande abraço brother!
: Não avaliado
Cara, muito obrigado!
Sofro há tempos com isso...