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

转载于 2014-03-25 20:26:00 发布 · 52 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bennman/p/3624063.html

本文介绍了一种使用inline-block属性实现未知尺寸元素水平垂直居中的方法。通过在div容器内设置特定样式，并利用伪元素及span标签辅助，使得内部元素无论尺寸如何都能保持居中效果。

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