jQuery实现的div在窗口中垂直水平居中效果:
现在都讲究对称的美，所谓对称那就是上下左右都是一样的，所以现在得弹出窗口一般都讲究上下左右垂直居中，下面就通过代码实例简单介绍一下如何实现此效果，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#thediv{
width:100px;
height:80px;
background-color:red;
display:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
function setDivCenter(divName){
var top=($(window).height()-$(divName).height())/2;
var left=($(window).width()-$(divName).width())/2;
var scrollTop=$(document).scrollTop();
var scrollLeft=$(document).scrollLeft();
$(divName).css({position:'absolute','top':top+scrollTop,left:left+scrollLeft}).show();
}
$(document).ready(function(){
$("#bt").click(function(){
setDivCenter("#thediv");
})
})
</script>
</head>
<body>
<div id="thediv"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
点击按钮弹出的div层具有上下左右垂直居中效果，代码比较简单这里就不多介绍了，具体可以参阅相关阅读内容。
相关阅读:
1.height()函数可以参阅jQuery的height()方法一章节。
2.width()函数可以参阅jQuery的width()方法一章节。
3.scrollTop()函数可以参阅jQuery的scrollTop()方法一章节。
4.scrollLeft()函数可以参阅jQuery的scrollLeft()方法一章节。
5.css()函数可以参阅jQuery的css()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12577
更多内容可以参阅:http://www.softwhy.com/jquery/