JavaScript 未知高度元素垂直居中实现代码
作者:bea
<!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> <meta http-equiv="Content-Type" content="text
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript未知高度元素的垂直居中的方法</title>
<script type="text/javascript">
function vMiddle(){
var middleDiv=document.getElementById("wrap");
var divHeight=middleDiv.offsetHeight;
var bodyHeight=document.body.offsetHeight ;
if(bodyHeight>divHeight)
middleDiv.style.marginTop=-divHeight/2+"px";
else{
middleDiv.style.marginTop=0;
middleDiv.style.top=0;
}
}
</script>
<style type="text/css">
html,body{height:100%;padding:0;margin:0;}
#wrap{width:800px;margin:0 auto;border:1px solid red;position:absolute;top:50%;left:50%;margin-left:-400px;}
</style>
</head>
<body onload="vMiddle();">
<div id=wrap>
Jb51.net<br>
<br>
</div>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- javascript 鼠标事件总结
- javascript 处理事件绑定的一些兼容写法
- javascript 事件加载与预加载
- Javascript 键盘keyCode键码值表
- JQuery与iframe交互实现代码
- jquery 弹出登录窗口实现代码
- 使用jQuery获取radio/checkbox组的值的代码收集
- Jquery 高亮显示文本中重要的关键字
- JQuery 写的个性导航菜单
- JavaScript中出现乱码的处理心得
- js 页面刷新location.reload和location.replace的区别小结
- CSS+Jquery实现页面圆角框方法大全
- HTA版JSMin(省略修饰语若干)基于javascript语言编写
- javascript下arguments,caller,callee,call,apply示例及理解
- 关于Aptana Studio生成自动备份文件的解决办法
- window.js 主要包含了页面的一些操作
- js 效率组装字符串 StringBuffer
- JS+CSS实现的一种交互体验 表单页面
- javascript 仿开心网好友印象功能(点击文字弹出印象框)