E aí pessoal! Vou mostrar aqui como centralizar uma div usando CSS.
Primeiramente vamos criar o documento html:
Centralizar
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:
Centralizar
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!