<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.wrap {
width:800px;
height:500px;
text-align:center;
background:#eee;
}
.container {
display:inline-block;
vertical-align:middle;
border:1px solid #aaa;
}
.edge {
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="wrap">
<span class="container"> <!– 这里我们使用了一个违背规则的方法，使用span嵌套div。（当然也可以避开） –>
<img src="http://www.baidu.com/img/baidu_logo.gif" alt="" />
<div>hello</div>
</span>
<span class="edge"></span> <!– 引入作为垂直对齐的空标签 –>
</div>
</body>
</html>
原文参考：http://www.cssass.com/blog/index.php/2008/36.html
之前也有搜集过网络上一些纯CSS的几种方法。
下文与以上并无关系。
先说一些（未知尺寸元素）垂直居中的思路：
1. 我们一般会设置height=line-height来使一行内文字(及inline元素)可以垂直居中，那能不能推而广之呢？遗憾，单纯设置外层height=line-height使image等可置换元素垂直居中，在ie6下是行不通的。见小结line-height和vertical-align, image等可置换元素尚且不行，更别提div等块级元素了。
2. 利用display的一个属性：table-cell。其实这个方法用来支持垂直居中，那是舍我其谁啊，可惜的是ie8以下的浏览器并不支持display:table-cell;
我们可以看一下：
我们发现以上代码在ie6，ie7之下并不能完成我们的要求。
这就是为什么本文开头收集的那些方法要极尽怪异之写法，而想要达到全兼容之目的了。
下面，在我们的新方法中，我们得引入一个空标签。
这种方法在http://www.deviantart.com/网站上很早就应用了。不过，人家针对firefox,opera等支持table-cell的浏览器使用display:table-cell;
而只对ie6,7这两个异类使用了空标签来达到效果。
上面代码的注释里我提到了span嵌套div的不规范问题，可以这样修改：
对于上面的display:inline-block稍微解释一下：
ie6,7对display:inline-block其实支持并不完善的。（这也不稀奇，firefox2是完全不支持）
在ie6,7下的inline元素设置display:inline-block能够达到效果，但对于block元素却无能为力。
所以使用了*display:inline;zoom:1来达到display:inline-block的效果。这也是haslayout的“功劳”。
–补充：2011-3-4–
如果文字超过块的宽度，我们发现在ie8下则不能垂直居中了。然而我们知道ie8是支持table-cell的。
所以结合两个方法——结合后的方法是一个比较完美的方法：