浏览器窗口放大缩小后页面内容居中解决方法

 
   #_back{ 
    border:#F00 1px solid; 
    z-index:0; 
    text-align:center; 
    padding:0px 0px 0px 0px; 
   } 
    
   #_total { 
    width:960px; 
    height:600px 
    border: 1px solid black; 
    position: relative; 
    padding:0px 0px 0px 0px; 
   } 
    
   #_mag { 
    width:960px; 
    height:600px 
    padding:0px 0px 0px 0px; 
   } 
    
  

重点是下面的代码：

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

 
  
  
  x=0; 
 $(document).ready(function(){ 
 $(window).resize(function() { 
   $("span").text(x+=1); 
 }); 
  
}); 
  
  
  
 
窗口大小被调整过 0 次。
 
 
请试着重新调整浏览器窗口的大小。
 
  


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

 
  $(document).ready(function(){ 
  
  // 这里是窗口刚刚打开的时候，页面中的图片就要居中显示。 
   //网页可见区域宽：  
  var width = document.documentElement.clientWidth; 
   //网页可见区域高：  
  var height = document.documentElement.clientHeight 
    
   var n = 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); 
   } 
    
   // 同样的 判断宽 
   var aw = 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 如果在标签上面没有写  这句话。 
  
//document.documentElement.clientWidth 在IE下是获取不到值得，鉴于规范，还是写上这句  
    var _width = document.documentElement.clientWidth; 
    var _height = document.documentElement.clientHeight; 
     
   var w = _width - 960; 
    var h = _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");  
   } 
   }); 
  
 
 }); 
  

这是我想出的方法来解决这个问题。希望能够看懂。
如果有更好的防解决 “窗口放大缩小后内容居中的问题”可以相互讨论。
源码我会上传的。附件是源码。
百度网盘下载地址