就是你给onresize事件绑定一个处理方法，当窗口大小变化时，始终让底图居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
// 把一个对象居中
function setToCenter(element)
{
var documentRect = getDocumentRect();
var divRect = getRect(element);
divRect.left = Math.ceil((documentRect.width - divRect.width)/2);
divRect.top = Math.ceil((documentRect.height - divRect.height)/2);
element.style.left = divRect.left + "px";
element.style.top = divRect.top + "px";
}
// 取得当前窗口的大小
function getDocumentRect()
{
var rect =
{
left:0,
top:0,
document.documentElement.clientWidth,
height:document.documentElement.clientHeight
};
return rect;
}
// 取得相对与offsetParent的距离
function getOffsetRect(element)
{
var rect =
{
"left":element.offsetLeft,
"top":element.offsetTop,
"width":element.offsetWidth,
"height":element.offsetHeight,
"right":element.offsetLeft + element.offsetWidth,
"bottom":element.offsetTop + element.offsetHeight
}
return rect;
}
// 取得一个对象的绝对位置
function getRect(element)
{
var rect = getOffsetRect(element);
while(element = element.offsetParent)
{
rect.left += element.offsetLeft;
rect.top += element.offsetTop;
}
rect.right = rect.left + rect.width;
rect.bottom = rect.top + rect.height;
return rect;
}
</script>
</head>
<body>
<div id="div1" style="200px;height:200px;background:Gray;position:absolute;"></div>
</body>
</html>
<script type="text/javascript">
function setCenter()
{
setToCenter(document.getElementById("div1"));
}
window.onresize = setCenter;
setCenter();
</script>