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