Centralizar DIV ao centro da tela com Javascript

Gunnar CorreaGunnar Correa03/02/2015 às 11:58:35 - 8.008 acessos

Veja como deixar uma sempre ajustada ao centro da tela com um simples calculo em Javascript.


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.*/
				

javascript html css programação div layout centro tela design contêiner javascript div centralizar div calculo com javascript

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários