水平居中方案总结

定位1 需要考虑宽高

body{
    position:relative;
}
​
.box{
    position:absolute;
    letf:50%;
    top:50%;
    margin-top:-(box高的一半)；
    margin-left:-(box宽的一半);
}

定位2 有宽高但是不需要考虑宽高

body{
    position:relative;
}
​
.box{
    position:absolute;
    letf:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
}

定位3 CSS神器，不需要宽高，兼容性偏差

body{
    position:relative;
}
​
.box{
    position:absolute;
    letf:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

display

body{
    display:flex;
    align-item:center;
    justify-content:center;
}

js

let html = document.documentElement,
    winH = html.clientHeight
    winW = html.clientWidth
    boxH = box.offsetHeight
    boxw = box.offsetWidth
​
    box.style.position = "absolute";
    box.style.left = (winW - boxW)/2 + "px";
    box.style.top = (winH - boxH)/2 +"px";

display:table-cell

body(父元素){
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    width:500px;
    height:500px;//要求父元素有固定宽高，百分比不算
}
​
.box{
    display:inline-block;//本来是用于文本，所以子容器必须转换为inline-block
}