Como todos sabem, há inúmeras necessidades de termos uma DIV posicionada ao centro da tela, seja ela um alerta, Newsletter, informações ou qualquer outra necessidade que realmente necessite ficar ao centro.
Porém temos diferentes usuários com diferentes resoluções de tela que vão acessar nosso projeto, é praticamente um crime definir um valor default para obter este resultado, pois usuários com resolução de 800 ou 5000 teriam sérios problemas.
O que fazer para ter minha DIV centralizada ao centro da tela?
Para responder esta pergunta e recorrer a solução vamos utilizar Javascript, acalme-se, é algo muito simples de ser entendido.
O Javascript conta com infinitas funcionalidades e vamos utilizar as mais conhecidas, para quem já utilizou Unity 3D vai entender a lógica rapidamente.
Primeiramente precisamos armazenar em variáveis a resolução da tela em X e Y, após armazenas a largura e altura de nossa DIV e por último efetuar uma conta para aplicarmos a nossa tão querida DIV.
Note o código abaixo, está totalmente comentado, mas caso haja dúvidas, podem deixar nos comentários ou nos enviar um E-mail.
Código Javascript:
window.addEventListener("load",function(){ /*A função será chamada quando o documento (página) for carregado.*/
var div = "myDIV"; /*Informamos o nome da DIV.*/
var alturaTela = screen.height; /*Atribuimos a variável alturaTela a resolução em Y altura da tela.*/
var larguraTela = screen.width; /*Atribuimos a variável larguraTela a resolução em X da tela.*/
var widthDIV = 500; /*Atribuimos a variável widthDIV a largura da nossa DIV.*/
var heightDIV = 250; /*Atribuimos a variável heightDIV a altura da nossa DIV.*/
var posicaoX = (larguraTela / 2) - (widthDIV / 2); /*Explicado logo abaixo.*/
var posicaoY = (alturaTela / 2) - (heightDIV / 2); /*A mesma explicação acima para largura se aplica aqui.*/
/*A variável posicaoX faz o seguinte cálculo:
laguraTela / 2. ex: 1366 / 2 = 683.
widthDIV / 2. ex: 500 / 2 = 250.
Por fim: 683 - 250 = 432.
432 será a posição em PX onde nossa DIV deve começar.
*/
document.getElementById(div).style.width = widthDIV + "px"; /*Através do Javascript acessamos a propriedade width do CSS e aplicamos a ela o valor em width para nossa DIV, este valor é especificado na variável widthDIV.*/
document.getElementById(div).style.height = heightDIV + "px"; /*A mesma explicação para widthDIV se aplica aqui, porém aqui é atribuido o valor para altura, heightDIV.*/
/*Através do document.getElementById() conseguimos acessar um objeto em nosso documento e ter acesso as suas propriedades.*/
/*No bloco de código abaixo que a mágica acontece, acessamos a propriedade top e left e atribuimos os respectivos valores de nossos cálculos para o posicionamento em tela.*/
document.getElementById(div).style.top = posicaoY + "px"; /*Posição da tela referente ao eixo X.*/
document.getElementById(div).style.left = posicaoX + "px"; /*Posição da tela referente ao eixo Y.*/
