作为前端攻城师,在制作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)