Center Position Layout With Javascript

Center Position Layout With Javascript: "

sometimes we wanted a page layout that fully center from browser width and height. The short way to doing this is using css marginal. We may pupolar with these codelist

.div{
 width:400px;
 margin:0 auto;
}

with that code the div element will inherit among the lower layer so the auto work determine to centralize right and left marginal to fit with the browser width. But with this way we must manualy describe how much the height of div element. It is to balance between top and bottom space. And once again it is not cross browser. So you might still met the difference space between top and bottom.

To solve it and make it flexible to follow all browser width and height we can eventually use javascript. We just need to get the current width and height. Then we have to substract it with current div element width and height with following divide the element into two.

function(){
 var someDiv= document.getElementById("someDiv");
 var windowWidth = document.documentElement.clientWidth;
 var windowHeight = document.documentElement.clientHeight;
 var popupHeight = someDiv.clientHeight;
 var popupWidth = someDiv.clientWidth;
 someDiv.style.position = "absolute";
 someDiv.style.top = parseInt(windowHeight/2-popupHeight/2) + "px";
 someDiv.style.left = parseInt(windowWidth/2-popupWidth/2) + "px";
};

Mix it with HTML and CSS by your own and see the result.

nb: contact me if you’re getting problem

"