js、css分别实现元素水平垂直居中

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