设置div层在屏幕的绝对居中

 var myWidth = 0, myHeight = 0;
if (typeof (window.innerWidth) == "number") {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else {
        if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;
        } else {
            if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }
        }
    }
//var left =(myWidth - target.clientWidth) / 2+"px";
//var top =(myHeight - target.clientHeight) / 2 + document.documentElement.scrollTop+"px";
//alert(myWidth);
//var left =(myWidth - 100) / 2;//+"px";
//var top =(myHeight - 100) / 2 + document.documentElement.scrollTop;//+"px";

 

var left =( (window.screen.width -303  ) /2);
var top = ( (window.screen.height -284  ) /2);
//var Right = left + 303;
//var Bottom = top + 284;
//alert(left);
//alert(Right);
//alert(top);
//alert(Bottom);
var Left2 = ((303-169)/2 );
//( parseInt(left) + (303-169)/2 );
var Top2 =  ((284-67)/2 );

所以如果我有一个位于中间的层的同时又有一个位于该层中间的层的话,应该计算的是该层相对于父层的相对位置,所以上面的脚本实现的是父层的宽度是303,高是284,那么屏幕的分辨率减去宽和高除以2就是该层的居中位置,子层的位置是该层的宽和高减去子层的宽169和高67除以2即得到子层的中心位置.

 

如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的，区别在于：

1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。

2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。

3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在css里，style.left的值仍然 为空，这就是我刚开始碰到的问题，总是取不到style.left的值。offsetLeft则仍然能够取到，无需事先定义div的位置。