css 垂直居中

一个老生常谈的问题，很多时候我都是用js去获取内容高度然后margin-top：-height/2来实现，今天鬼使神差的常试用的css解决，但发现除了IE8外，其它的浏览器都可以，感谢群里的AY童鞋帮助解决IE8的问题，原来IE8已经支持display:table,display:table-cell了。

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	* { padding:0; margin:0;}
	ul { list-style:none; margin:100px auto; width:500px;}
	li { width:100px; height:200px; float:left; margin-right:10px; border:1px solid #000;display:table; *display:block; zoom:1;}
	li span {display:table-cell; vertical-align:middle; *position:relative; top:50%;*display:block; width:100% ; text-align:center;}
	li span strong {margin:0 auto; *position:relative; top:-50%; display:block;}
</style>
</head>

<body>
<ul>
	<li><span><strong>Surprise double take Surprise double take</strong></span></li>
    <li><span><strong><img src="images/close_lightbox.jpg"  alt="" title="" /></strong></span></li>
    <li><span><strong><img src="images/wp-logo.png"  alt="" title="" /></strong></span></li>
</ul>
</body>
</html>

posted @ 2011-04-14 16:22  zjhsd2007  阅读(548)  评论(2)  编辑  收藏  举报