菜鸟看前端（div水平垂直居中）

直接上干货

基础div样式

        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #box{
            width: 100px;
            height: 100px;
            text-align: center;
            color: aliceblue;
            background: #0088dd;
        }

已知div宽度和高度

body{
position: relative;
}

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

不需要已知宽高，但必须有宽高

body{
position: relative;
}
#box{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
} 

不需要固定宽高

body{
position: relative;
}
#box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

不需要定位给父级弹性盒子

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

不需要定位给父级弹性盒子2

body{
display: flex;
}
#box{
margin: auto;
}

js实现（需要给父级一个相对定位）

    let HTML = document.documentElement;

    let winWidth = HTML.clientWidth;
    let winHeight = HTML.clientHeight;

    let boxW = box.offsetWidth
    let boxH = box.offsetHeight

    box.style.position = "absolute"

    box.style.left = (winWidth-boxW)/2 + 'px';
    box.style.top = (winHeight-boxH)/2 + 'px';