创新路
我们一直在努力

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轻松实现图层水平/垂直居中

客官点个赞呗! (1)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机