实现垂直居中的几种方法介绍

1.让 line-height 属性值和 height 属性值相等来设置 p 元素居中

.center {  
    line-height: 200px;  
    height: 200px;  
    border: 3px solid green;  
    text-align: center;  
}  
<p class="center">  
  <p>我是垂直居中的。</p>  
</p>  

2.使用transform属性来设置垂直居中:

.center {   
    height: 200px;  
    position: relative;  
    border: 3px solid green;   
}  
  
.center p {  
    margin: 0;  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    -ms-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);  
}  
<p class="center">  
  <p>我是水平和垂直居中的。</p>  
</p>  

3.利用Padding

.center {  
    padding: 70px 0;  
    border: 3px solid green;  
}  
<p class="center">  
  <p>我是垂直居中的。</p>  
</p>