[转载]大小不定的图片垂直居中汇总

[转载]大小不定的图片垂直居中汇总 – Dm.Yang’s Blog – 博客园.

最近一段时间一直学习js，CSS接触不多，前几天在蓝色理想经典论坛上看到一篇帖子（CSS图片垂直居中方法整理集合），按照上面的做法做了一些改进和扩展，分享如下：

针对一个box里面的n张图片，我总结了下面几种方法（持续更新）使其在box里面垂直居中（水平居中就不废话了，你懂的~）。

1、使line-height值和box的height值相同

结构如下（下面第6点的结构也一样，除了box的扩展类名不同）：

样式：

这种方式的优点是：同时支持块级和内联极元素；支持图片和图片以及图文混排。

缺点是：只能显示一行。

说明：这里使用writing-mode兼容ie6，参考了blueidea的那篇文章，以前算是孤陋寡闻吧，看来对ie使用“以毒攻毒”的办法还 是挺有效的嘛。同时在结构上也做了调整，传统的方式（即box里面嵌套一个span，然后把img放里面对span使用与i类似的样式）如果是把两张图放 在span里面，则IE6下两张图会上下排列（writing-mode的缘故），所以小弟在此做了一点点改进。

2、对box使用padding-bottom=padding-top方法

结构和第1点类似，，除了box的扩展类名不同，少了ie注释。

样式如下：

优点：支持图片和图片以及图文混排；支持所有浏览器。

缺点：box的高度不能固定。

说明：如果box的高不固定，这算是最简单的一种方法了吧，简单到用起来的时候心里头都慌慌的（就像大中小学生对待1加1等于几那个问题一样^_^）。可是经过测试，在所有主流浏览器下都有效，读者可以试着换张灰常大的图试试（我没测试哈）。

3、使用定位方法

结构如下（下面4、5点的结构也一样，除了box的扩展类名不同）：

优点：所有浏览器都支持；支持图片和图片以及图文混排。

缺点：垂直方向的居中不完美，需要根据box的高度作调整；需额外嵌套一层标签。

说明：这个应该不算什么新方法了吧，以前做垂直居中都用这法子。定位确实是一种很不错的布局方式，如果不考虑IE6，float早可以回家休息了（貌似也不远了，请参考拜拜了,浮动布局-基于display:inline-block的列表布局，此文将让您有足够的理由放弃float）。

4、使用display:table-cell方法

结构同上，样式如下：

优点：完全按照table式布局。但要注意合法的table-cell元素应该作为table元素的子元素出现；支持图片和图片以及图文混排。

缺点：IE6/7不支持(要用hack，可以与定位法杂交)；需额外嵌套一层标签。

说明：这种方法也不是什么新法子，模拟表格做布局，你懂的。

5、使用font-size方法

结构同上，样式如下：

优点：支持图片和图片以及图文混排。文本需重定义font-size。

缺点：font-size值强烈依赖box的height值；一个font-size值不能兼容所有浏览器，ie6、7下需做另外调整；目前Opera(10.6)不支持这种方法；需额外嵌套一层标签。

说明：这应该是几种方法中最蛋疼的一种了吧，兼容性也最差，在实际操作中尽量避免吧。

6、使用inline-block方法

结构同1，样式如下：

优点：如果不用:after伪元素而是添加一个额外的标签（如i），可兼容所有浏览器；支持图片和图片以及图文混排。

缺点：IE6/7不支持:after伪元素，这时需要用hack（或像本文一样额外添加了一个无语义的i）。

说明：inline-block！好东西！

叽叽喳喳说了半天，现在奉上测试源码，请单击查看Demo

注：本文测试所用到的浏览器为IE6、7、8，FF 3.6，Chrome 7.0，Opera 10.6，Safari 5.0。由于本人水品有限，目前想到的方法就这么多（后续会有更新），有不对的地方望各位指正！

本文出自chemdemo及博客园，转载请注明来源，谢谢。

（全文完）