js实现div居中
Posted Cutelady0927
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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居中的主要内容，如果未能解决你的问题，请参考以下文章