元素垂直居中的方法有很多,之前偶然发现了一个不需要固定高度即可让元素垂直居中的方法。
其实原理就是使用表格模式,
1.对元素父级使用
display: table;
2.对元素使用:
display: table-cell;
vertical-align: middle;
demo如下:
css部分:
.wrap {
display: table;
}
p {
display: table-cell;
vertical-align: middle;
}
html部分:
<div class="wrap">
<img src="http://game.gtimg.cn/images/yxzj/img201606/heroimg/127/127.jpg">
<p>居中显示</p>
</div>
还有一点需要注意:使
用table布局后,margin属性会无效