首页 > 代码库 > js实现div居中
js实现div居中
<!doctype html><html><head><meta charset="utf-8"><title>JS实现-DIV自动居中代码</title><meta name="keywords" content="" /><meta name="description" content="" /><style>*{margin:0;padding:0}#box{width:100px;height:100px;position:absolute;top:30px;left:20px; background:#ccc}</style></head><body><div id="box"></div><script>window.onload = function(){ function box(){ //获取DIV为‘box‘的盒子 var oBox = document.getElementById(‘box‘); //获取元素自身的宽度 var L1 = oBox.offsetWidth; //获取元素自身的高度 var H1 = oBox.offsetHeight; //获取实际页面的left值。（页面宽度减去元素自身宽度/2） var Left = (document.documentElement.clientWidth-L1)/2; //获取实际页面的top值。（页面宽度减去元素自身高度/2） var top = (document.documentElement.clientHeight-H1)/2; oBox.style.left = Left+‘px‘; oBox.style.top = top+‘px‘; } box(); //当浏览器页面发生改变时，DIV随着页面的改变居中。 window.onresize = function(){ box(); } }</script></body></html>
js实现div居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。