父元素高度确定的多行文本、图片、块级元素的竖直居中

方法一：css中有一个用于竖直居中的属性vertical-align，但只有当父元素为td或th时，这个vertical-align属性才会生效，对于其他块级元素，例如div、p等，默认情况下是不支持vertical-align属性的。在Firefox和IE8下，可以设置块级元素的display类型为table-cell，激活vertical-align属性，但是IE6和IE7并不支持display:table-cell;所以这种方法没办法跨越浏览器兼容，但我们可以使用最原始的笨方法来实现兼容——既然不支持块级元素设置为display:table-cell;来模拟表格，那么，我们就直接使用表格好了。

方法二：对支持display:table-cell;的IE8和Firefox用display:table-cell;和vertical-align:middle;来实现居中，对不支持display:table-cell;的IE6和IE7,使用特定格式的hack，在不支持display:table-cell;的IE6和IE7下，通过给父子两层元素分别设置top：50%和top：-50%来实现居中，这种方法的缺点是一方面使用了hack，不利于维护，另一方面，它需要设置position：relative和position：absolute，带来了副作用。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/141

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！