关于居中的小整理

.item{
  margin: auto;
  position: absolute;
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0;
}
/* 以上代码为position方式居中 PS:如果需要在div中实现需要在父元素css中加上position:relative; */
.item{
  display: flex;
  justify-content:center;
  align-items: center;
  height: 300px;
}
 /* 以上代码为flex居中 PS:这里需要设置高度来查看垂直居中效果,并且有兼容问题 */

.item{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 以上代码与第一种方差不多 这一种写法虽然代码简洁但是在某些情况下有BUG */

 以上是我整理出的三种水平垂直居中方式，如果大家有更多想法欢迎补充~