Site icon 时鹏亮的Blog

JavaScript-垂直居中示例

请知悉:本文最近一次更新为 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


如您从本文得到了有价值的信息或帮助,请考虑扫描文末二维码捐赠和鼓励。

尊重他人劳动成果。转载请务必附上原文链接,我将感激不尽。


与《JavaScript-垂直居中示例》相关的博文:

Exit mobile version