这是用于水平和垂直居中的纯CSS2解决方案，而没有已知的容器大小或子大小。不涉及黑客。我在此答案中发现了它，并在此答案中也进行了演示。
该解决方案基于与
vertical-align: middle结合使用
line-height: 0，其父级具有固定的行高。
HTML：
<span id="center"> <span id="wrap"> <img src="http://lorempixum.com/300/250/abstract" alt="" /> </span></span>
和CSS：
html,body { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden;}#center { position: relative; display: block; top: 50%; margin-top: -1000px; height: 2000px; text-align: center; line-height: 2000px;} #wrap { line-height: 0;}#wrap img { vertical-align: middle;}在IE8，IE9，Opera 11.51，Safari 5.0.5，FF 6.0，Chrome 13.0的Win7上进行了测试。
唯一的警告是IE7，对此最里面的两个元素必须在一行中声明
<span id="center"> <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span></span>
请注意，IE7也需要跨度。在所有其他浏览器中，跨度可能是div。
