div始终在窗口中垂直水平居中代码实例
分类：实例代码
本章节分享一段代码实例，它实现了div在窗口中始终垂直水平居中效果。
即便是调节窗口的尺寸也是如此，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>前端教程网</title>
<style>
#box{
width:100px;
height:100px;
background-color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function(){
$('#box').css({
position:'absolute',
left: ($(window).width() - $('#box').outerWidth())/2,
top: ($(window).height() - $('#box').outerHeight())/2
});
});
$(window).resize();
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
上面的大妈实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$(window).resize(function(){})，当调整浏览器窗口大小的时候触发此事件。
（3）.$('#box').css({})，设置元素的样式值。
（4）.position:'absolute',设置为绝对定位。
（5）.left: ($(window).width() - $('#box').outerWidth())/2，设置元素的left属性值，为（当前窗口的宽度-元素的宽度）/2，这时候，元素的恰好实现水平居中。
（6）.top: ($(window).height() - $('#box').outerHeight())/2，和上面同样的道理，实现了垂直居中效果。
（7）.$(window).resize()，调用一次resize()方法，实现打开页面时候就垂直居中效果。
二.相关阅读:
（1）.resize事件可以参阅jQuery resize事件一章节。
（2）.css()方法可以参阅jQuery css()一章节。
（3）.outerWidth()方法可以参阅jQuery outerWidth()一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu