先说下简单的思路：

1.获得窗口的大小，高度，宽度。

2.要知道显示的图片（我这里用图片举例）的大小，宽，高。（我的图片显示设置为 宽：960，高600 ）

3.简单算法，获得的浏览器宽，高 减去 图片的宽，高 除以2 就是 间隔距离了。

4.当然还有获得窗口放大，缩小的事件了。根据事件来设置（margin）。

首先将图片弄到body里面，代码如下：

<body><divid="_total"><divid="_back"><imgid="_mag"src="p_w_picpaths/1.jpg"/></div></div></body> body 里面就只有两个div 图片套了一下。 加点 CSS 样式：（吐槽下：我对CSS 不专业。）

<styletype="text/css">#_back{border:#F001pxsolid;z-index:0;text-align:center;padding:0px0px0px0px;}#_total{width:960px;height:600pxborder:1pxsolidblack;position:relative;padding:0px0px0px0px;}#_mag{width:960px;height:600pxpadding:0px0px0px0px;}</style>

重点是下面的代码：

<scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/jquery.ba-resize.js"></script>


先解释下： jquery自带的 resize() 方法是可以监听窗口放大缩小事件的。 但是我在网上搜索了下：jquery 自带的 resize(） 方法在IE下会执行两次。 下面的这些代码是 W3CSCHOOL 上面的样例源码，测试之 resize() 方法是执行的两次。

<head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">x=0;$(document).ready(function(){$(window).resize(function(){$("span").text(x+=1);});});</script></head><body><p>窗口大小被调整过<span>0</span>次。</p><p>请试着重新调整浏览器窗口的大小。</p></body>

所以我在这里用了别人重写的resize(）方法的插件。 jquery.ba-resize.js 这里是插件的下载地址：点击下载 用这个插件直接一样的 $("selecter").resize(handler); 语法写。 下面就是js代码了。

<scripttype="text/javascript">$(document).ready(function(){//这里是窗口刚刚打开的时候，页面中的图片就要居中显示。//网页可见区域宽：varwidth=document.documentElement.clientWidth;//网页可见区域高：varheight=document.documentElement.clientHeightvarn=height-600;if(n>0){n=n/2;n+="px";$("#_total").css("margin-top",n);}//这里控制的是margin-top属性//其实<0的时候不用考虑图片的高度，直接margin-top=0px就可以了。我这里是改变了图片显示的高度。if(n<0){$("#_total").css("margin-top","0px");height+="px";$("#_total").css("height",height);}//同样的判断宽varaw=width-960;if(aw>0){aw=aw/2;aw+="px";$("#_total").css("margin-left",aw);}if(aw<0){$("#_total").css("margin-left","0px");}//这里就是监控窗口放大缩小的事件了。$(window).resize(function(){//一样的获得当前的高度和宽度//重点说下这个document.documentElement.clientWidth如果在<html>标签上面没有写<!DOCTYPEhtml>这句话。//document.documentElement.clientWidth在IE下是获取不到值得，鉴于规范，还是写上这句<!DOCTYPEhtml>var_width=document.documentElement.clientWidth;var_height=document.documentElement.clientHeight;varw=_width-960;varh=_height-600;if(w>0){w=w/2;w+="px";$("#_total").css("margin-left",w);}if(w<0){$("#_total").css("margin-left","0px");}if(h>0){h=h/2;h+="px";$("#_total").css("margin-top",h);}if(h<0){$("#_total").css("margin-top","0px");}});});</script>

这是我想出的方法来解决这个问题。希望能够看懂。

如果有更好的防解决 “窗口放大缩小后内容居中的问题”可以相互讨论。

源码我会上传的。附件是源码。

百度网盘下载地址


附件：http://down.51cto.com/data/2362175