JS实现-DIV⾃动居中代码
其实想让整个DIV盒⼦在页⾯实现⾃动居中⾮常简单，只需要⼀⼩段JS代码代码就可以实现。有时候我们做页⾯效果也好，做程序功能的开发也好。只要思路理清楚了，相信做起来会⾮常的得⼼应⼿。
下⾯就跟⼤家⼀起简单分析下JS是如何实现让DIV盒⼦，在页⾯⾃动居中，并且随着页⾯的变动，也能居中。
思路：
⼀、⾸先我们的DIV盒⼦模型，⼀般是绝对定位于浏览器的，那么⾸先我们可以先获取整个页⾯（浏览器的可视区）的宽度、⾼度。
⼆、然后获取⾃⾝DIV盒⼦的宽度、⾼度。
三、⽤浏览器可视区的宽度、⾼度，减去DIV⾃⾝的宽度，⾼度，然后除以2。就可以获取到DIV距离页⾯的top值，left值。在赋值给DIV相应的top值，left值。
四、随着我们的浏览器窗⼝的改变，让DIV盒⼦也能随着页⾯的改变⽽居中。（利⽤onresize事件）
代码截图：
代码如下:
<!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>
function box(){
//获取DIV为‘box’的盒⼦
var oBox = ElementById('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';
p = top+'px';
}
box();
//当浏览器页⾯发⽣改变时，DIV随着页⾯的改变居中。
box();
}
}
</script>
</body>
</html>
<style>
.parentElement {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
div中的div居中margin: auto;
}
</style>
<div class="parentElement">
I'm
</div>
本⽂由段亮博客，原创出品，如需转载请注明出处。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。