css实现多行文字或者图片的垂直居中

CSS实现单行文字在容器垂直居中大家都知道可以用line-height。如果是多行文字且容器高度不固定倒也简单,直接用padding就解决了。我在这里主要说固定高度容器内多行文字的垂直居中,当然是要兼容几个常用浏览器了,其实主要还是IE6、IE7了。

网上有几种方法可以实现,大家可以去搜搜,我这里就不讲解了。我主要说一下我用到的方法,其实都大同小意,也有一点点css hack的味道在里面,但不会是什么“*”号或者是“_”这种w3c不认识的hack,主要是从CSS选择器方面下手。下面来看看:

HTML代码很简单,我用的是三层容器,主要是为了兼容IE6、IE7,要不然两层就够了

注意看顶层容器有一个lang属性,是的,我就是通过这个属性来hack的。因为高级浏览器是支持display:table和display:table-cell的,可以用这两个属性实现垂直居中,但是IE7以下版本的浏览器不支持,但是IE7以下浏览器可以使用绝对定位来实现垂直居中,于是有了下面的CSS代码:

我们先使用绝对定位的方式来满足IE7以下的浏览器实现垂直居中,为什么使用绝对定位然后top:50%和top:-50%能居中,而且只能在IE7以下版本浏览器中才有效,据说是IE的layout的bug,具体原因我也不太清楚,反正是能用就好了,以后再深入去研究。

第二步,也是最关键的,使用:lang选择器,这个选择器只有IE8以上版本和高级浏览器才支持,于是正好,我们可以用这个选择器来实现高级浏览器的垂直居中的CSS,即display:table的方式。

好了,就是这样,附上效果图,效果自己去测试吧。

本人也是菜鸟,文字表达不太清楚请多包涵,这个方法其实也是借鉴了一些别人的思路。以前总在迫不得已的情况下会使用hack,现在其实也可以通过选择器来达到同样的效果,虽然也算是hack,但是总比什么“*”、“_”之类的看着好看些,纯属个人偏好了。