Centralizando uma DIV
E aí pessoal! Vou mostrar aqui como centralizar uma div usando CSS.
Primeiramente vamos criar o documento html:
Depois de criado, vem a parte do estilo:
#central {
width: 300px; /*largura*/
height: 300px; /*altura*/
border: solid 1px #000000; /*estilo, tamanho e cor da borda (pra ficar mais fácil a visualização*/
}
Primeiramente, nossa div tem o tamanho de um quadrado de 150px de lado.
Agora, vamos colocá-la em posição absoluta:
#central {
width: 300px;
height: 150px;
border: solid 1px #000000; /*estilo, tamanho e cor da borda (pra ficar mais fácil a visualização*/
position: absolute;
}
Com nossa div em posição absoluta e com o tamanho pré-estabelecido, vamos atribuí-la os valores para a centralização:
#central {
width: 300px;
height: 300px;
border: solid 1px #000000; /*estilo, tamanho e cor da borda (pra ficar mais fácil a visualização*/
position: absolute;
left: 50%; /*posição em relação à parte esquerda*/
top: 50%; /*posição em relação à parte superior*/
}
Dessa maneira, nossa div estará quase centralizada, porém, o browser interpreta o “ponto zero” para a posição como o canto superior esquerdo da div.
Agora o show!
Com todos os atributos selecionados, vamos colocá-la para ficar centralizada na página:
#central {
width: 300px;height: 300px;
border: solid 1px #000000; /*estilo, tamanho e cor da borda (pra ficar mais fácil a visualização*/
position: absolute;
left: 50%; /*posição em relação à parte esquerda*/
top: 50%; /*posição em relação à parte superior*/
margin-left: -150;
margin-top: -150;
}
Com as margens em -150 tanto pra cima quanto para a esquerda, ele pega o “ponto zero” e “empurra” a 150 pontos para que o mesmo fique no centro.
Então, nosso código final ficará assim:
Com isso, você pode redimensionar a janela que a div sempre estará no centro.
Legal né?!
Espero que tenham gostado!
Desculpe por não ter instalado o GeSHi! :S
Quem quiser um exemplo:
Clique aqui!
Powered by FireStats
Você me ajudou muito
thanks
vc tem um sistema de postagen tipo esse pronto
vlw
Interessante, sempre vi disso por ai, mas e se minha div aumentar de tamanho? Isso ai é pra tamanho fixo… =(
O bom é ela ficar inicialmente centralizada em middle e aumentando o conteúdo ela vai expadindo até alcançar o topo da página e expandir para baixo!
Rapaz, parabéns pelo site, gostei muito do post, demonstrou de uma maneira fácil como centralizar a página.
Agora, uma sugestão, os códigos no fundo branco, dificultam meuito a leitura, não é muito legal de se ler, fere a acessibilidade.
No mais, tudo blz!!!
Caro, valeu msmo..
Quebrou um galhão!
boa tarde amigo..
entao eu to fazendo um site pra um amig.. to aprendendo na raça..
olha só o eskema q eu fiz.. no front page
eu coloquei uma tabela.. inseri uma imagem q eu fiz no fireworks.. (até ai td bem..)
ai eu fui colocar os botoes.. coloquei dentro das camadas … (layer)
enfim.. no internet explorer.. fica linnnnndo.. mas ai vo no mozila ou outro navegador.. as camadas (layers) fika desalinhada.
ja olhei em varios lugares como eu deixo a bendita layer onde eu quero , pra todos os navegadores.. mas ninguem me fala.. ja me mandaram codigos.. mas eu nao sei o lugar exato onde por.. ajuda eu ai kamarada.. obrigado.
qualquer coisa.. meu msn é..
maga.lada@hotmail.com
vlw.