css实现垂直居中的各种方法

.box{
  height:300px;  
}
p{
  line-height:300px;  
}

.box{
  display:table;  
}
p{
  display: table-cell;
  vertical-align: middle;  
}

.box{
  position:relative;  
}
p{
  position:absolute;
  top:50%;
  margin-top:-50px;       
  width:100px;
  height:100px;   
}

.box{
  position:relative;  
}
p{
  position:absolute;
  top:50%;
  transform: translate(0,-50%);   
}

.box{
  position:relative;
  width:400px;
  height:400px;      
}
p{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
}

.box{
    display: flex;
    align-items: center;  
}