<script type="text/javascript">
function preCheck(){
var Width = parseInt(document.getElementById("lyr_id").style.width)
var Height = parseInt(document.getElementById("lyr_id").style.height)
var posX = (document.body.clientWidth - Width) / 2
var posY = (document.body.clientHeight - Height) / 2
document.getElementById("lyr_id").style.left=posX
document.getElementById("lyr_id").style.top=posY
}
// include onload="preCheck()" in the opening body tag
</script>
Include onload="preCheck()" in the opening body tag
<DIV id="lyr_id" style="position:absolute;left:200px;top:130px;width:300px;height:200px;border:2px solid #000000; background:#c9bda9">Your Layer</DIV>
Note: The width and height of the layer must be stated inline.
In the following example the middle layer is positioned in the center along the x-axis with the left and right layers positioned 20 pixels to the left and right respectively of the middle layer.
Alter the width of your window and notice the left and right layers always maintain the 20 pixel distance and the middle layer stays central
Left Layer
Middle Layer
Right Layer
<script type="text/javascript">
function preCheck(){
var mid_width = parseInt(document.getElementById("mid").style.width)
var posX = (document.body.clientWidth - mid_width) / 2
document.getElementById("mid").style.left=posX
lefty=parseInt(document.getElementById("left_side").style.width)
document.getElementById("left_side").style.left=posX - lefty-20
document.getElementById("right_side").style.left=posX+mid_width + 20
}
onresize=preCheck
// include onload="preCheck()" in the opening body tag
</script>
<div id="left_side" style="position:absolute;top:150;width:100;height:200;border:1 solid green">Left Layer</div>
<div id="mid" style="position:absolute;top:150;width:100;height:200;border:1 solid red">Middle Layer</div>
<div id="right_side" style="position:absolute;top:150;width:100;height:200;border:1 solid blue">Right Layer</div>