浏览器屏幕上显示的块级元素居中

1、首先知道整个屏幕的高度和宽度

 获得屏幕的宽度和高度：    

 alert(document.documentElement.clientWidth);     

  alert(document.documentElement.clientHeight);

2、居中则要设置块级元素的top 、left 值

则需先将块级元素设置成绝对定位， 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<h tml>。假设块级元素的width：350px height：250px

然后计算left =  (document.documentElement.clientWidth - 350) / 2；

top=  (document.documentElement.clientHeight - 250) / 2;

封装居中函数库 以及浏览器大小改变函数：

//设置物体居中
Base.prototype.center = function(width,height){
	var left = (document.documentElement.clientWidth - width) / 2;
	var top = (document.documentElement.clientHeight - height) / 2;
	for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].style.top = top + 'px';
        this.elements[i].style.left = left + 'px';
    }
	return this;
}

//出发浏览器窗口事件
Base.prototype.resize = function(fn){
	window.onresize = fn;
	return this;
}

假设现有一个div块级元素的宽350px 高250px；

html代码：

<div id="login">
	<h2><img src="img/close.png"alt="" class="close">网站登录</h2>
	<div class="user">账号:<input type="text" name="user" class="text" /> </div>
	<div class="pass">密码:<input type="password" name="pass" class="text" /></div>
	<div class="button"><input type="button" class="submit" value=""/> </div>
	<div class="other">注册新用户  |  忘记密码？</div>
</div>

css代码：

 #login{
 	width:350px;
 	height:250px;
 	border:1px solid #ccc;
 	position: absolute;
 }

采用封装后的函数调用实现块级元素一直居中：

var login = $().getId("login");   //简化代码
	login.center(350,250).resize(function(){
		login.center(350,250);
	});