jquery轻松实现图层水平/垂直居中

作为前端攻城师，在制作Web页面时都会碰到div水平/垂直居中的问题，水平居中相对还好解决一点，特别是垂直居中，解决起来就有点麻烦了。这里介绍一个用jquery的解决方案，几句代码轻松搞定。

基本的CSS代码，内容无所谓，本例中主要是看效果用的

<style type="text/css">
.jz{
width:300px;
height:300px;
background-color:#CCCCCC;
}
</style>

需要居中的div，本例为jz

<div class="jz"></div>

jquery相关

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">  
    $(document).ready(function(){
	var $center=$(".jz");
        $($center).css({
	"position":"absolute",
	"top":($(window).height()-$($center).height())/2+$(window).scrollTop()+"px",
	"left":($(window).width()-$($center).width())/2+$(window).scrollLeft()+"px"});
    });  
</script>

相关说明：

窗口的高度$(window).height()

减去

图层的高度$($center).height()

除以2，就是居中的意思

最后需要加上

垂直滚动条位置$(window).scrollTop()来修正

未经允许不得转载：天府数据港官方信息博客 » jquery轻松实现图层水平/垂直居中