CSS实现不定宽高垂直水平居中问题

这个也是一个很古老的问题了，下面总结几种最常见的方式

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

flex方式

.content {
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #090;
}
.item {
   width: 200px;
   height: 200px;
   background: #f00;
}

定位方式

.content {
    height: 800px;
    border: 1px solid #090;
    position: relative;
}
.item {
   width: 200px;
   height: 200px;
   background: #f00;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

以上总结两种，其他方式请自行百度，个人认为这两种方式最好理解，更便利