通常产品列表，我们希望产品图片是在一个盒子内垂直居中，如果图片尺寸未知，且希望保持原来的宽高比例，就涉及到未知高度元素垂直居中的问题。
如果不用考虑IE6/7，问题会非常简单，display: table-cell 可以将元素以表格单元格的形式呈现，那么垂直居中就不是问题了，现在我们的情况是要考虑IE6/7，display: table-cell 在IE6/7下行不通。
首先我们来看这样一段HTML：
1 2 3 | <ul> <li><a href=""><img src="" alt="" /></a></li> </ul> |
其中，li的宽和高都是固定的，但图片的宽和高可能是不确定的，此时，如果希望图片水平居中，只需要给li应用 text-align: center 即可，但如果需要图片垂直居中就不那么容易了。
网上有许多方法可以实现不固定高度元素垂直居中，例如：背景法、添加标签法，但这类破坏HTML结构的方法都是我不想要的，最后采用了淘宝的方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | li a { width: 160px; height: 160px; padding: 2px; background-color: #fafafa; border: 1px solid #ececec; margin: 0 auto; display: table-cell; *display: inline-block; *font-size: 140px; *font-family: Arial; vertical-align: middle; } li img { vertical-align: middle; } |
关键代码为：
1 2 3 4 5 6 7 8 9 10 | li a { display: table-cell; *display: inline-block; *font-size: 140px; *font-family: Arial; vertical-align: middle; } li img { vertical-align: middle; } |
我不是很情愿使用Hack，但实在没办法，使用Hack总比在HTML中添加额外元素要好得多，所以个人觉得这是目前我所知的最好的解决方法。
这里需要注意font-size的值，是根据li的高度除以1.14得来的，具体为什么淘宝工程师也不知道。
另外，如果图片的高度的是固定的，那么可以使用绝对定位加负外边距实现。
原文链接：https://xiaohost.com/2386.html，转载请注明出处。
