水平垂直居中

水平垂直居中
答：1. 使用绝对定位 + transform，给子元素添加如下样式(如果子元素的宽高确定的话，translate中的值也可以设置为子元素宽高的一半，即transform: translate(-100px, -100px)😉
.work {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

2.使用绝对定位 + margin，给子元素添加如下样式 (这种方式适合子元素宽高确定的情况，给margin-top设置百分比的大小将不生效，即margin-top: -50%;不能达到垂直居中的效果)
.work1 {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}

3使用绝对定位 + margin: auto，给子元素添加如下样式(父子元素宽高都未知时也适用)
.work2 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
}

4.父元素使用flex布局，并设置相关的属性值为center
.par-work {
height: 100vh;
display:flex;
justify-content:center;
align-items:center;
}