宁波网站制作,手机网站制作,微信公众号开发等提供专业的网站服务
- 业务咨询电话：15867435963 0574-88171828 QQ：853624982
JS实现-DIV自动居中代码
-
其实想让整个DIV盒子在页面实现自动居中非常简单，只需要一小段JS代码代码就可以实现。有时候我们做页面效果也好，做程序功能的开发也好。只要思路理清楚了，相信做起来会非常的得心应手。
下面就跟大家一起简单分析下JS是如何实现让DIV盒子，在页面自动居中，并且随着页面的变动，也能居中。
思路：
一、首先我们的DIV盒子模型，一般是绝对定位于浏览器的，那么首先我们可以先获取整个页面（浏览器的可视区）的宽度、高度。
二、然后获取自身DIV盒子的宽度、高度。
三、用浏览器可视区的宽度、高度，减去DIV自身的宽度，高度，然后除以2。就可以获取到DIV距离页面的top值，left值。在赋值给DIV相应的top值，left值。
四、随着我们的浏览器窗口的改变，让DIV盒子也能随着页面的改变而居中。（利用onresize事件）
代码截图：
JS实现-DIV自动居中代码1.jpg
代码如下:
<!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;border:1px solid red;}
</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>
