欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-02-05 18:50:16
1.让 line-height 属性值和 height 属性值相等来设置 p 元素居中 .center { line-height: 200px;...

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>