盒子水平居中的五大方案

首先先展示结构代码

<style>
.father {
500px;
height: 500px;
background-color: red;
}
.child {
100px;
height: 100px;
background-color: #000;
}
</style>
<div class="father" id="father">
<div class="child" id="child"></div>
</div>

这里展示两种方式：
1、定位实现
transform有兼容问题
.father{
position:relative;
}
.child{
position:abolute;
top:50%;
left:50%;
transform:translate(-50%,50%);
}

2、js方式

let widW = father.childWidth,
widH = father.clientHeight,
boxW = child.offsetWidth,
boxW = child.offsetHeight,
child.style.position = 'absolute';
child.style.left = (winW - boxW)/2 +'px';
child.style.top= (winH - boxH)/2 +'px';

其余的三种方式分别是margin,display:flex,以及display:table-cell。而在实际开发中，我们会发现display：flex;的功能特别强大，也是运用的最为广泛的