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

1、行内元素居中 line-height（须知高度）

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

2、table居中 display:table-cell;vertical-align:middle;

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

3、绝对定位，top+margin-top:-xxpx（须知高度）

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

4、绝对定位 top+tranform

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

5、使用绝对定位 position left right bottom top margin:auto（须知高度）

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

6、flex弹性盒模型 align-items:center

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