p标签多行文字内容实现上下垂直居中兼容ie8

 

之前实现上下居中一般都是用height和line-height的来设置。

今天在修改样式的时候，p标签的文字内容可能是一行也可能是两行，

所以用height和line-height就没效果。

今天找到了一种方法，挺好用的。

设置p标签的父元素样式{height, position: relative;}

p标签的样式加上

{position: absolute;

top: 50%; left: 0;

 

transform: translateY(-50%);

-ms-transform:translateY(-50%);

-o-tranform:translateY(-50%);

-webkit-transform:translateY(-50%);

-moz-transform:translateY(-50%);

 

}。

这样就可以轻松搞定内容垂直居中了。

在后来发现transform这属性IE8是不兼容的;

解决办法：

把元素显示成行内table，高度设置为0px;为了保证代码可以生效;优先级要最高可以在后面加上 !important这个属性;

{display: inline-table;height: 0px;}