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

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

菜鸟看前端（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.offsetWidthlet boxH = box.offsetHeightbox.style.position = "absolute"box.style.left = (winWidth-boxW)/2 + 'px';box.style.top = (winHeight-boxH)/2 + 'px';