CSS将子元素移动到父元素中心
在绝对定位中将top和left值设为0是表示距离父元素左部和顶部距离为0，子元素处在父元素左上角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
background-color: #ff8787;
height: 800px;
width: 800px;
margin: 0 auto;
/* 为父级容器开启相对定位 */
position: relative;
}
.child {
background-color: #91a7ff;
width: 400px;
height: 400px;
/* 子元素开启相对定位 */
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
将top设为50%时，这里的50%是相对于父元素，相当于子元素顶部距离父元素顶部的距离相当于父元素高度的一半，即将子元素往下移动到父元素高度的50%处
（此处只有子元素CSS，其他代码和上面相同）
.child {
background-color: #91a7ff;
width: 400px;
height: 400px;
/* 子元素开启相对定位 */
position: absolute;
top: 50%;
left: 0;
}
再将left设为50%时
将left设为50%时，这里的50%是相对于父元素，相当于子元素顶部距离父元素左部的距离相当于父元素宽度的一半，即将子元素往右移动到父元素宽度的50%处
.child {
background-color: #91a7ff;
width: 400px;
height: 400px;
/* 子元素开启相对定位 */
position: absolute;
top: 50%;
left: 50%;
}
将子元素左上角的顶点看作原点的话，向下向右移动50%后，原点处于父元素中心，然后transform: translate(-50%, -50%);相当于将图片向左移动图片宽度的一半，向上移动图片高度的一半，及将子元素中心移动到父元素中心位置，子元素处于父元素中心
.child {
background-color: #91a7ff;
width: 400px;
height: 400px;
/* 子元素开启相对定位 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
