一、实现居中的三种方式

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>