不固定高度元素的垂直居中

元素垂直居中的方法有很多，之前偶然发现了一个不需要固定高度即可让元素垂直居中的方法。

其实原理就是使用表格模式，

1.对元素父级使用

display: table;

2.对元素使用：

display: table-cell;

vertical-align: middle;

demo如下：

css部分：

.wrap {
        display: table;
    }

    p {
        display: table-cell;
        vertical-align: middle;
    }

html部分：

        
        
居中显示
    

还有一点需要注意：使 用table布局后，margin属性会无效