<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

Related Posts: JavaScript-垂直居中示例 :

  1. 那天看到这个完全居中的写法,觉得有点意思。http://blog.jobbole.com/46574/