<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>inline-block实现未知尺寸元素水平垂直居中终极方案</title>
<style>
#demo{
overflow:hidden;
resize:both;
width:180px;
height:100px;
margin:10px auto;
text-align:center;
background:#eee;
font-size:0;
}
#demo:after,#demo span{
display:inline-block;
*display:inline;
*zoom:1;
width:0;
height:100%;
vertical-align:middle;
}
#demo:after{
content:'';
}
#demo p{
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:middle;
font-size:16px;
}
</style>
</head>
<body>
<div id="demo">
<p>这是一个终极实现的水平垂直居中实例</p>
<!--[if lt IE 8]><span></span><![endif]-->
</div>
</body>
</html>
