js实现元素水平垂直居中、css实现元素水平垂直居中
css实现元素水平垂直居中【4行代码】js实现元素水平垂直居中【弄巧成拙】css实现元素水平垂直居中【4行代码】
#div{top:50%;left: 50%;transform: translate(-50%,-50%);}
解释:
top、left
设为50%,是元素div
基于父容器的长宽偏移50%
;
transform: translate(-50%,-50%)
是元素div
基于自身的长宽再反过来偏移50%
;
效果等同于如下js代码:
js实现元素水平垂直居中【弄巧成拙】
let selfAdaption = (id) =>{let screenHeight=parseInt($(window).height()); //浏览器时下窗口可视区域高度let screenWidth=parseInt($(window).width()); //浏览器时下窗口可视区域高度$("#"+id).css({'marginLeft':(screenWidth-parseInt($("#"+id).width()))/2+'px','marginTop':(screenHeight-parseInt($("#"+id).height()))/2+'px',})}selfAdaption('divID');
之前不知道用css这么方便,还整了个自适应函数。
但是这个函数完美解释了上述css代码的运行机制。
最后,其实这个js代码还是有问题的,只能保证页面在第一次加载的时候指定的元素居中,但是当页面改变的时候元素位置并不会发生改变。这个时候如果再用js思想解决的话,可以封装在window.onresize()函数里面,即当页面大小出现变化时,重新调用一下居中函数。
可是没必要,上述css代码在页面大小改变时,可以自适应居中。