如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?

By柏小白

如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>已知宽高的容器内水平垂直居中?</title>
    <style>

.test{display:table-cell;*display:block;*position:relative;width:200px;height:400px;text-align:center;vertical-align:middle; background:#58d0fe;}
.test p{*position:absolute;*top:50%;*left:50%;margin:0;}
.test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

    </style>
</head>
<body>
    <div class="test">
        <p>
            
            <img src="" alt="">
        </p>

    </div>
</body>
</html>

 





已知宽高的容器内水平垂直居中?


柏小白家臭小子



About the author

柏小白 administrator