JS实现在不知道盒子宽高的情况下，默认让盒子在页面中水平垂直居中

旧城等待， 2022-06-04 23:09 263阅读 0赞

当然在我们**知道宽高的情况下**，  
1、我们通过CSS的中的绝对定位实现

#box{ 
    	width:100px;
    	height:100px;
    	position:absolute;
    	top:50%;
    	left:50%;
    	margin-top:-50px;
    	margin-left:-50px;
    }

2、通过CSS中的margin=auto,四个方向都为0的方法也可以实现

#box{ 
    	width:200px;
    	height:200px;
    	margin:auto;
    	position:absolute;
    	top:0;
    	right:0;
    	bottom:0;
    	left:0;
    }

3、可以通过CSS3的弹性布局（flex），实现盒子的居中  
废话不多说，直接上代码.

body { 
          display: flex;
          align-items: center; /*定义body的元素垂直居中*/
          justify-content: center; /*定义body的里的元素水平居中*/
     }
    #box{ 
    	height:200px;
    	width:200px;
    	background-color:red;
    }

**不知道宽高的情况下**

我们可以通过JS中**先获取一屏的宽高，再获取到盒子的宽高**。

var  windH = document.documentElement.clientHeight||document.body.clientHeight; 
    //获取一屏的高度。(两种写法为了兼容所有浏览器)
    
    var  windW = document.documentElement.clientWidth||document.body.clientWidth;
    //获取一屏的宽度。
    
    var boxH = document.getElementById('box').offsetHeight;  //获取盒子的高度（border(top\bottom)+padding(top\bottom)+height）
    
    var boxW = document.getElementById('box').offsetWidth;  //获取盒子的宽度（border(left\right)+padding(left\right)+width）
    
    #box.style.top=(winH-boxH)/2+'px';
    #box.style.left=(winW-boxW)/2+'px';

以上几种方式都可以使得盒子水平垂直居中。。。