一、实现居中的三种方式
1. 绝对定位 + transform
<div style="width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: red;"></div>
2. flex 弹性布局居中
<div style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;">
<div style="width: 100px; height: 100px;background-color: red;"></div>
</div>
3.父节点作物 grid place-items:center;
<div style="width: 100vw; height: 100vh; display: grid; place-items:center;">
<div style="width: 100px; height: 100px;background-color: red;"></div>
</div>
