未知宽高图片垂直居中

场景：图片宽高未知，使其在固定宽高容器中垂直居中。

为父元素设定一个伪元素：：after,其高度为父元素的高度，display:inline-block,将其设定为vertical-align:middle即可撑开line box，同时line box的baseline为父元素高度一半的位置。然后设定子元素vertical-align:middle，即可实现居中。

<style type="text/css">
.pic_box{
    border:1px solid red;    
    width: 300px;
    height: 300px;
    text-align: center;
    overflow: hidden;
    font-size: 0;
}
.pic_box::after{
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
img{
    vertical-align: middle;
}
</style>

<div class="pic_box">
    <img src="img/sheep.png" />
</div>

未知宽高图片垂直居中

兼容性：这里需要使用一些hack，由于IE8不支持::after伪元素，所以需要一个span来替代。而display:inline-block亦需要hack。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
.g-ctn {
    height: 800px;
    width: 100%;
    text-align: center;
}
.g-ctn:after,.g-ctn span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:0;
    height:100%;
    vertical-align:middle;
}
.g-ctn:after{
    content:'';
}
.g-ctn .g-mn{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width: 80%;
    max-height: 80%;
    max-width: 1000px;
    vertical-align:middle;
    overflow: auto;
}
</style>
</head>
<body>
<div class="g-ctn">
    <div class="g-mn">
        <p>这是内容区</p>
        <p style="font-size: 3em;">这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话</p>
    </div>
    <!--[if lt IE 8]><span></span><![endif]-->
</div>
</body>
</html>

View Code