webARTz | Centro Absoluto com CSS

Centro Absoluto com CSS

Bom pessoal, vamos começar pelo começo, como diria um sábio amigo meu. (hauHAuhUAhuh)

Em geral antigamente quando se fazia um site com tamanhos pré-definidos, por exemplo 700×400, para deixar esse layout bem centralizado se fazia um improviso com tabelas, que em geral dependendo do navegador como sempre bugava, não ficava perfeito. Pois nem todos os navegadores interpretam comandos e sintaxes da mesma forma, não livramos disso ainda, vejam o caso de FireFox, IE, Oper, etc… mas facilitamos as coisas, vou explicar como.

Exemplo:
Aquele mesmo site exemplo de 700×400 pixels que falei antes, podemos centralizar ele perfeitamente com alguns simples comandos de CSS e uma layer (DIV) no HTML. Veja o exemplo abaixo.

Parte CSS que você coloca com a TAG <style> antes de fechar o <head> do HTML ou então chamando de um arquivo.css que você criou. Ao lado de cada comando colocarei a explicação.

Linha 1: Esse será o nome (ID) da DIV que utilizaremos
Linha 2: Esse comando posiciona de forma absoluta ao BODY do HTML
Linha 3: Aqui dizemos ao HTML que nossa DIV estará a 50% de distância da margem esquerda
Linha 4: Como o comando acima, dizemos que estará a 50% de distância da margem superior
Linha 5 e 6: Especificamos a largura e altura da nossa DIV
Linha 7 e 8: Aqui vem o “pulo do gato”, quando definimos o centro com o left e top em 50%, achamos o centro absoluto do BODY do HTML, mas como nossa DIV não tem 1×1 pixels, temos que descontar um valor da margem, que é feito tirando a metade do valor dos tamanhos de nossa DIV com a margem negativa, façam as contas, e pronto. Você tem o centro absoluto de uma DIV.