1.flex居中
//父元素
display: flex;
justify-content: center;
align-item: center;
2.gird居中
//父元素
dispaly: grid;
//子元素，作用是让单元格内内容居中
place-self: center center;
3.绝对定位(自身元素需固定宽高)
- 1.利用margin撑开
//父元素
position: relative;
//自身元素
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 250px;
widht: 250px
- 利用translate偏移自身50%
//父元素
position: relative;
//自身元素
position: absolute;
left: 50%;
top: 50%;
transform: translate(50%, 50%);
width: 250px;
height: 250px;
//tranlate百分比相对于自身元素
//自身元素固定宽高
