关于居中的小整理

.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 */

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