不定宽高元素水平垂直居中

 <div class="container">
        <div class="item"></div>
 </div>

绝对定位 + margin：auto

.container{
    position:relative;
}
.item{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
}

绝对定位 + transform

.container{
    position:relative;
}
.item{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
}

flex 布局

.container{
       display: flex;
       justify-content: center;//项目在主轴（默认主轴为水平轴，垂直为交叉轴的对齐方式
       align-items: center;//项目在交叉轴的对齐方式
}

grid 布局

.container{
       display: grid;
       justify-content: center;//整个内容区在水平方向的对齐方式
       align-items: center;//整个内容区在垂直方向的对齐方式
}