Javascript - Center a web page vertically

June 2017





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.

Related


Published by jak58. Latest update on April 25, 2013 at 10:15 AM by deri58.
This document, titled "Javascript - Center a web page vertically," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).