具有锚定悬停状态的未知大小的垂直/水平居中图像

Question

我试图将具有未知尺寸的图像（水平和垂直）居中。此图像可能大于容器的大小（101x84），因此我需要使用max-width和max-height约束图像。最后，图像需要具有悬停状态，如果用户将鼠标悬停在图像上，则图标将出现在容器的中间。

目前，我的代码符合上述所有要求，但我无法垂直对齐我的图像。我尝试过其他指南，例如将img更改为display:inline-block，但随后我松开水平中心对齐。

如果可能的话，除非绝对必要，否则我宁愿不使用javascript / jQuery。

http://jsfiddle.net/uNvSU/1/

Answer 1

尝试使用display:table-cell，然后使用vertical-align:middle，然后使用margin:0 auto;或text-align:center

那应该是对的。

Answer 2

我无法发表评论，所以我将此作为一个单独的答案。

IE7不支持

display:table-cell。因此，如果您必须支持IE7，则可以添加此项以使display:table-cell正常工作：

<!--[if lte IE 7 ]><table><td><![endif]-->
<div>                   
 ...
</div>
<!--[if lte IE 7 ]></td></table><![endif]-->

此处还讨论了六种不使用javascript的垂直居中方式：http://www.vanseodesign.com/css/vertical-centering/