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代码在页面大小改变时，可以自适应居中。