css-绝对定位元素居中效果

1、 left: 50%; top: 50%; transform: translate(-50%, -50%);（自己本身尺寸的百分比）
.father {
position: relative;
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son {
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -50px; */
transform: translate(-50%, -50%);
width: 203px;
height: 100px;
background-color: pink;
}