display:table-cell实现垂直居中
在做项目时发现一个属性特别好用,可以轻松的实现父元素内的行内元素水平垂直居中,特别是一个p标签由于文字太长而换行,此时需要水平垂直居中,可以将其display属性的值设置为table-cell属性,将父元素的display设置为他table,结合使用vertical-aglin:midddle使其垂直居中,使用text-aglin:center使其水平居中这样达到了水平垂直居中的效果。可通过一下代码实现效果:
<div class="box1">
<p>这是一个网页这是一个网页这是一个网页</p>
</div>
.box1{
width: 200px;
height: 150px;
border: 1px solid darkcyan;
}
没有加入代码前的效果:
修改代码:
.box1{
width: 200px;
height: 150px;
border: 1px solid darkcyan;
display: table;
}
p{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
height: 16px;
}
效果图:
这样就实现了水平垂直居中。
一般情况下,我们会使用其行高即line-height的值与父元素的高度相同这样实现垂直居中,用text-aglin实现水平居中,可是当内容太多需要换行时,这种方法就不可用了,这样会使文字溢出的。