常见的居中方法

1.水平居中 【宽高固定】

margin:0 auto 

2.绝对定位+四个反向都为0+margin=auto
【宽高固定】 【水平垂直居中】

	width: 200px;
    height: 200px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;

3.绝对定位+top50%+left50%+(margin=-宽/2 -高/2)
【宽高固定】 【水平垂直居中】

      width: 200px;
      height: 100px;
      position: fixed;
      left: 50%;
      top: 50%;
      margin: -100px -50px;

4.绝对定位+top50%+left50%+translate(-50%,-50%)
【宽高固定+不固定】 【水平垂直居中】

   width: 200px;
   height: 100px;
   position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

5.父元素flex+align-items=center+ justify-content= center;
【宽高固定+不固定】 【水平垂直居中】

   display: flex;
   align-items: center;
   justify-content: center;