页面元素居中 css获取页面中心位置

css获取页面中心位置

.fixed
{
FONT-SIZE: 30pt;
color : #1A6841;
left:expression(eval(document.body.clientWidth)/2-150);
top:expression(eval(document.body.clientHeight)/2-25);
width:300px;
height:50px;
border:green 1px solid;
background:#99CCFF;
+position:absolute;
+left:expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)/2-150);
+top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)/2-25);

}

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

通用对联实现，Div在底部浮动
<table width="1003" border="0" cellspacing="0" cellpadding="0" align="center" id="maple1">
<tr>
    <td align="center" height="30" bgcolor="#999999">浮动内容哦</td>
</tr>
</table>
<script type="text/javascript" src="Maple_Couplet.Js"></script>
<script type="text/javascript">
window.onload = function(){
   n=window.screen.height; //屏幕的分辨率
   m=window.screenTop;   //网页内容距屏幕顶部的距离 即 IE按钮，地址栏等的高度
   myBottom=n-m-30-50; //n-m-显示Div的高-底部状态栏和任务栏的高约50
   //aa.innerHTML=m;
        new couplet("maple1",myBottom,40);
}
</script>

<SCRIPT language="JavaScript" type="text/javascript">
function openmu() {
     //var left = screen.width;
     var left = screen.availWidth;
     //var top = screen.height;
     var top = screen.availHeight;
     alert(left);
     alert(top);
    
     alert('总高度'+document.body.scrollHeight);
     alert('可见高度'+document.body.clientWidth);
     alert('可见宽度'+document.documentElement.clientHeight);
}
</SCRIPT>

说明：

clientHeight

大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理

clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/gnahshining/archive/2009/12/26/5081264.aspx