盒子在页面居中的三种方法

1、前两种方法都是通过css样式来做到的，第三种是通过JS实现的

　　第一种方法：IE8以下 不兼容

　　　

div {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

　　第二种方法：兼容IE11,10、9、8、7、5（亲测）

　　　左右都为50%的边距，最后要减去自身的宽高的一半，所以margin-left 和 margin-top为负数

div {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 50%;
 7             left: 50%;
 8             margin-top: -50px;
 9             margin-left: -50px;
    }

　　第三种方法

　　var$div = document.querySelector('div');

function Center(ev) {

ev = ev || window.event;

//获取盒子宽度

var $div_width = $div.offsetWidth;

//获取盒子高度

var $div_height = $div.offsetHeight;

//获取window 高度

var Height = window.innerHeight;

//获取window 宽度

var Width = window.innerWidth;

console.log(Width);

//计算盒子距离顶部的距离

var top = (Height - $div_height)/2

//计算盒子距离左边的距离

var left = (Width - $div_width) / 2

$div.style.top = top + 'px';

$div.style.left = left + 'px';

console.log(Height);

}

Center();

 

 

 

 

 

div {

width: 100px;

height: 100px;

background: red;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

}