Middle-help 终极实现元素水平垂直居中 

<!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>

 

posted @ 2014-03-25 20:26  Unintended  阅读(199)  评论(0)    收藏  举报