当前位置： 移动技术网 > IT编程>网页制作>CSS > 实现垂直居中的几种方法介绍

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

2018年03月29日  | 移动技术网IT编程  | 我要评论

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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网