实现div里的内容垂直居中

---恢复内容开始---

在项目中我们会遇到这种情况,一个div的宽固定,里面的内容长度不定,不管是一行还是多行,都要垂直居中,有俩个实现方法:

1、使用absolute,top:50%,transform: translateY(-50%)

 <div class="text">
<p>王企鹅我去二尔特人特瑞特让他热他人</p>
</div>
 p{
margin: ;
padding: ;
}
.text{
width: 200px;
height: 100px;
position: relative;
border: 1px solid #00aaee;
}
.text p{
width: 100%; (这个很重要,备注:1)
padding-left: 10px;
padding-right: 10px;
text-align: center;
position: absolute;
top: %;
transform: translateY(-%);
}

实现div里的内容垂直居中

缺点:

在内容不足以填满一行的时候会出现下面的问题

实现div里的内容垂直居中

这时p设置了width:100%,而且有padding

实现div里的内容垂直居中

p设置了padding,没有设置width:100%,就会无法水平居中

所以:实际情况中,如果p没有设置了padding,就可以width:100%,使用absolute。

如果设置了padding,最好可以使用table-cell

2、display:table-cell

 <div class="text">
<p>王企鹅我去二尔特人特瑞特让他热他人</p>
</div>
    p{
margin: ;
padding: ;
}
.text{
border: 1px solid #00aaee;
display: table-cell;
text-align: center;
width: 200px;
height: 100px;
vertical-align: middle;
}
.text p{
vertical-align: middle;
padding: ;
margin: ;
}

实现div里的内容垂直居中

缺点:俩个div都设置了display:table-cell,不能放在一起,不然排版会出问题

如果有俩个紧挨的div都要实现这种效果,可以一个用absolute,一个用table-cell,,或者俩个div都用table-cell,中间可以加一个没有效果的div

---恢复内容结束---

上一篇:zabbix中文配置指南(转)-服务器监控


下一篇:SpringMVC -jquery实现分页