Como alinhar sites ao centro da tela com CSS

Olá, pessoal!

Bom, esse é um post relativamente curto, onde explicarei como alinhar um site ao centro da tela através do CSS.

Existem duas maneiras, sendo que ambas são aplicadas ao div principal do seu site: a certa e o boato, sendo que o boato é o mais disseminado na Web, infelizmente. Primeiramente, vamos ao boato.

Alinhando sites ao centro da tela com divs de posição absoluta

Esse boato corre a Web, porém é uma explicação totalmente errada, principalmente pela ausência de teste de usabilidade. Veja abaixo um exemplo de CSS para o alinhamento dessa maneira:

#alinhacentro {
position: absolute;
width: 980px;
left: 50%;
top: 10px;
margin-left: -490px;
z-index: 1;
}

O código acima resulta em um site alinhado ao centro da tela, justamente por realizar um procedimento bastante simples:

1. A posição em X (left) do div é equivalente a 50% da tela.
2. Ao posicionar o div a 50% da tela, o próximo passo é recolher METADE da sua largura através da margem esquerda negativa.
3. Com isso, o div que estava com seu início a 50% da tela terá sua metade para trás, deixando assim o site exatamente no meio da tela.

Problemas

1. O usuário, se utilizar resolução inferior à largura do site, não conseguirá navegar nele por completo pelo fato da margem esquerda com valor negativo. O site entrará para a esquerda, inviabilizando principalmente os sites com menus verticais.
2. O usuário até pode ter resolução de tela compatível com o site, mas se ele utilizar o browser apenas com a metade da tela dele (digamos que ele esteja com duas telas ao mesmo tempo, sendo uma um documento do Word e outra o site, ou então um boleto bancário ou algo assim) enfrentará o mesmo problema.

Ou seja, essa maneira de formatação que corre a Web é absolutamente equivocada, e não deve ser praticada.

Alinhando sites ao centro da tela corretamente

Explicada a maneira errada, vamos à certa:

#alinhacentro {
position: relative; /* para o caso de necessidade de trabalho com divs absolutas dentro do site */
width: 980px;
margin: 0 auto; /* o primeiro valor é equivalente aos valores para topo e baixo, e o segundo para esquerda e direita */
}

O código acima resulta em um site alinhado ao centro da tela de maneira correta, pois não trabalha com a margem negativa. Você pode fazer o teste de usabilidade que sugeri, deixando o navegador com tamanho menor que o do próprio site, e verá que não enfrentará problema algum. Essa sim é a forma absolutamente correta de alinhar um site ao centro da tela com CSS.

Abraços!

   Enviar artigo em PDF