關於居中的小整理

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

 以上是我整理出的三種水平垂直居中方式，若是你們有更多想法歡迎補充~