Javascript - Center a web page vertically

Ask a question




How to center a web page vertically; its almost impossible to achieve this with CSS. The most practical solution is to use JavaScript.

The .js file


Copy/paste the following script in a file named for example: center.js

function align()      
{      

 var lmt = document.getElementById('center);      
 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);      
}

The .html file


For your page to be centered, you must call the .js file.
The page will be displayed as such:

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

  <!Put the code of your webpage here. It will be centered -->      
        
  </div>      
 </body>      
</html>

Implementation


The align() function defined in the .js file will retrieve the content that should be centered. In this example, the item having the ID [id = "center"] will be centered.

var lmt = document.getElementById('center ');

The same goes for the .html page, the contents found between the <div id="center"></div>, will be centered.

Note: this code will only work only if the users has Javascript enabled in their browser.
Jean-François Pillou

CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jeff Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.

Learn more about the CCM team