请知悉：本文最近一次更新为 10年 前，文中内容可能已经过时。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="background:#f6f6f6">
<div style="height:100%">
</div>
<a href="http://www.test.com/" target="_blank" style="display:block;width:180px;position:absolute;" id="pjlogo">
<img height="177" src="http://www.baidu.com/img/bdlogo.png" width="180" alt="pujia" title="pujia">
</a>
<script>
onresize=midimg;
function midimg(){
imgheight=getHeight("pjlogo",1);
imgwidth=getHeight("pjlogo",0);
screenheight=document.documentElement.clientHeight;
clientWidth=document.documentElement.clientWidth;
document.getElementById("pjlogo").style.top=parseInt((screenheight-imgheight)/2)+"px";
document.getElementById("pjlogo").style.left=parseInt((clientWidth-imgwidth)/2)+"px";
}
(function(){
midimg();
})();
function getHeight(id,height){
var height = 0;
var div = document.getElementById(id).getBoundingClientRect();
if(height){
if(div.height){height = div.height;}else{height = div.bottom - div.top;}
}else{
if(div.width){height = div.width;}else{height = div.right - div.left;}
}
return height;
}
</script>
</body>
</html>
以上代码实现了垂直居中的状态- -自己存档。
详细的有兴趣可以参考微信的文章：http://mp.weixin.qq.com/s __biz=MjM5NzA1MTcyMA==&mid=201584590&idx=2&sn=8f11cf3533030a53e899b4b83478e6f9#rd
如您从本文得到了有价值的信息或帮助，请考虑扫描文末二维码捐赠和鼓励。
如本文对您有用，捐赠和留言 将是对我最好的支持~（捐赠可转为站内积分）
如愿意，请向朋友推荐本站，谢谢。
尊重他人劳动成果。转载请务必附上原文链接，我将感激不尽。