Ser Programador

Como centralizar um elemento na tela com CSS

Entenda de forma simples como deixar um elemento fixo no centro de sua página


Olá, pessoal!

Frequentemente precisamos mostrar alguma mensagem para os usuários dos sistemas nos quais desenvolvemos, e hoje em dia utilizar o famoso alert do JavaScript seria no mínimo feio.

Por este motivo preferimos abrir uma caixa de diálogo no centro da tela com a mensagem que queremos apresentar.

A questão é que para quem não passou por esse mesmo caso ainda, fazer isso envolve um pouco de dificuldade e o ponto X da questão está ligado diretamente ao conceito.

A forma mais simplificada e menos "bonita/correta" de desenvolver seria a seguinte:

        

Você errou a senha!

        #centralizar{
            width: 300px;
            height: 200px;
            background: #0090ff;
            position: absolute;
            top: 50%;
            left: 50%;
        }
    

Esse estilo geraria algo parecido com isso:

Poria a quina da esquerda superior do objeto ao centro. Então passando margin negativo para cima e para esquerda com a metade da largura do objeto, o centralizaríamos. Vejamos:

        #centralizar{
            width: 300px;
            height: 200px;
            background: #0090ff;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
        }
    

Então você teria algo como:



A implementação dessa forma não é incorreta, porém te condicionaria a sempre trabalhar com um objeto de mesmo tamanho.


Vejamos então a forma mais correta e simples que temos para conseguirmos centralizar um elemento de qualquer tamanho:

        

Usuário incorreto!

Caso tenha esquecido sua senha, clique aqui!

        #centralizar{
            width: 300px;
            height: 200px;
            background: #0090ff;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin:auto;
        }
    

Com o estilo acima teremos o mesmo resultado. A diferença é que a caixa de diálogo - ou qualquer objeto que seja - sempre será centralizado dinamicamente, sem que precisemos efetuar cálculo algum.


Mas afinal, para quê servem as posições com valor zero?


Bem, agora precisamos partir para um princípio físico que envolve soma de vetores.

Tomando cada direção do CSS como uma direção na qual um vetor aponta com mesma força entre os demais (puxando o nosso objeto na direção em que aponta) teríamos, de forma imaginária, algo como o seguinte:

É sabido que qualquer objeto em repouso no espaço tempo deve obrigatoriamente ter a somatória de seus vetores igual a zero. Sendo assim todas as forças se anulam, o que deixa o objeto estático, caso contrário ele estaria em constante "movimento".

Sendo assim para a ilustração acima, temos quatro vetores puxando todos com mesma força o objeto, cada qual para o sentido em que aponta.

Seguindo por esse princípio a somatória de forças ficaria assim:

    	/*
        	Partiremos da direita no sentido anti-horário;
        	Tomaremos o número 100 como representação de força;
            Os sentidos para direita e para baixo tomemos como positivos.
            Os sentidos inversos como negativos;
            
            -> Incógnitas:
            	D => direita;
            	E => esquerda;
            	C => cima;
            	B => baixo;
        */
        
        D + C + E + B		= 0
        +100 -100 -100 +100	= 0
        
    

Como resultado temos zero, o objeto está estático. O margin:auto; se encarrega de todo o resto.