css实现定高的元素在不定高的容器中水平垂直居中（兼容IE8及以上）

容器设置相对定位

元素设置宽高，并使用绝对定位，上下左右值均为0，margin：auto

如下所示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .cc{
            height:500px;
            width:200px;
            text-align:center;
            background:#ccc;
            position:relative;
        }
        .cc div{
            width:100px;
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            height:100px;
            background:#f1ab44;
            margin:auto;
        }
        .cc div img{
            width:100%;
        }
    </style>
</head>
<body>
<div class="cc">
    <div>
        <img src="images/ct-logo-new.png"/>
    </div>
</div>
</body>
</html>

 

posted @ 2016-12-27 11:34  dongxiaolei  阅读(1597)  评论(0)  编辑  收藏  举报