CSS：当div的固定大小未知时，垂直对齐div

CSS：当div的固定大小未知时，垂直对齐div

这是用于水平和垂直居中的纯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。