Javascript - Centrar verticalmente uma página web

Janeiro 2017


Para centrar verticalmente uma página web, é impossível fazê-lo em CSS. Uma solução bem prática: JavaScript.


1. O arquivo .js


Copie/cole este script em um arquivo que você nomeará, por exemplo: centrar.js

function align() 
{ 

 var lmt = document.getElementById('centralização'); 
 var container = document.documentElement; 

 if(lmt && container) 
 { 
     var containerHeight; 
     if (container.innerWidth) 
     { 
            containerHeight = container.innerHeight; 
  } 
  else 
  { 
            containerHeight = container.clientHeight; 
  } 
     var lmtHeight; 
     if (lmt.innerWidth) 
     { 
            lmtHeight = lmt.innerHeight; 
  } 
  else 
  { 
            lmtHeight = lmt.offsetHeight; 
  } 
  var y = Math.ceil((containerHeight - lmtHeight) / 2); 
  if(y < 0) 
  { 
   y = 0; 
  } 
  lmt.style.position = "relative"; 
  lmt.style.top = y + "px"; 
 } 
 if (document.getElementById) 
 { 
  document.body.style.visibility = 'visible'; 
 } 

} 

function addevent(obj,evt,fn,capt){ 
 if(obj.addEventListener) 
 { 
  obj.addEventListener(evt, fn, capt); 
  return true; 
 } 
 else if(obj.attachEvent) 
 { 
  obj.attachEvent('on'+evt, fn); 
  return true; 
 } 
 else return false; 
} 

if (document.getElementById && document.getElementsByTagName) 
{ 
 addevent(window, 'load', align, false); 
 addevent(window, 'resize', align, false); 
}

2. A página .html


Para que sua página fique centrada, você deve chamar o arquivo .js.

A página se apresentará assim:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="pt" xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt"> 
 <head> 
  <!-- [...] --> 
  <script type="text/javascript" src="centrar.js"></script> 
 </head> 
 <body> 
  <div id="centralização"> 

  <!--Ponha o código de sua página aqui. Este será centrado --> 
   
  </div> 
 </body> 
</html> 

3. Uso


A função javascript align() definida no .js vai recuperar o conteúdo que deve ser centrado. Neste exemplo, é o elemento com a identificação [id="centralização"] que será centrado.
var lmt = document.getElementById('centralização');
Assim, no exemplo da página .html, é o conteúdo situado no elemento <div id="centralização"></div> que será centrado.

4. Desvantagens


Obviamente, trata-se de um trabalho improvisado. Este só não será eficaz se o usuário tiver ativado o Javascript no seu navegador.

5. Lembrete


Como acontece com qualquer utilização do Javascript, trata-se apenas de um enfeite. Soluções alternativas deveriam ser sempre propostas (infelizmente, algumas pessoas parecem esquecê-lo!) caso o usuário não ative o suporte desta linguagem.


Neste caso, não é possível. Mas o seu uso não impede a navegação se o suporte estiver desativado. Repetindo, isso é apenas um enfeite.



Tradução feita por Lucia Maurity y Nouira

Veja também

Artigo original publicado por . Tradução feita por pintuda. Última modificação: 9 de junho de 2011 às 14:12 por pintuda.
Este documento, intitulado 'Javascript - Centrar verticalmente uma página web', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.