Abhinay's Web-Dev Blog: Center align Div tags horizontally and vertically at Page center using JavaScript

Monday, June 1, 2009

Center align Div tags horizontally and vertically at Page center using JavaScript

It is easy to horizontally center align div tags on a page by using fixed width and auto left & right margins, but there is no efficient CSS technique which aligns the div tag at vertical center of the page. Though you can use CSS properties like display:table-cell combined with vertical-align:middle to align it roughly at the vertical center but it isn’t always accurate and scalable for div tags with different sizes.

My technique utilizes JavaScript functionalities to change CSS properties on the fly for aligning the Div tag at the page center based upon the current window size. Left and Top coordinates for the div tag are calculated on the fly based upon the window and div tag size. The JavaScript function reads the CSS properties for the div tag from the Stylesheet or inline styles and calculated the coordinates respectively.

Horizonally and Vertically Center Aligned Div Tag

Here is the complete HTML/JavaScript Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Center Aligned div</title>
<style type="text/css">

</style>
<script language="javascript">
function center_align(id){
      //Calculate Page width and height
      var pageWidth = window.innerWidth;
      var pageHeight = window.innerHeight;
      if (typeof pageWidth != "number"){
    if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
    } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
    }
      }
      var divobj = document.getElementById(id);
      //For CSS StyleSheet use:
      if (navigator.appName=="Microsoft Internet Explorer")
      computedStyle = divobj.currentStyle;
      else computedStyle = document.defaultView.getComputedStyle(divobj, null);
      //Get Div width and height from StyleSheet
      var divWidth = computedStyle.width.replace('px', '');
      var divHeight = computedStyle.height.replace('px', '');
      //For Inline styling use:
      //var divWidth = divobj.style.width.replace('px', '');
      //var divHeight = divobj.style.height.replace('px', '');
      var divLeft = (pageWidth - divWidth) / 2;
      var divTop = (pageHeight - divHeight) / 2;
      //Set Left and top coordinates for the div tag
      divobj.style.left = divLeft + "px";
      divobj.style.top = divTop + "px";
      divobj.innerHTML = "Page Width:"+pageWidth+"<br />Page Height:"+pageHeight;
      divobj.innerHTML += "<br /><br />Div Width:"+divWidth+"<br />Div Height:"+divHeight;
}
</script>
</head>
<body >
<div id="mydiv">
<a onclick="center_align('mydiv')" href="#">Put me at Page Center!</a>
</div>
</body>
</html>

If you are using inline styling for the div tag as follows:
<div id="mydiv" style="width: 400px; height: 200px; background-color: #CCC; position: absolute; padding: 10px;">
You can just use the var divWidth = divobj.style.width.replace('px', ''); method to retrieve the width and height of the div tag, instead of using the computedStyle object.