html - 水平和垂直居中 img

Question

我试图将图像在 div 中垂直和水平居中。结构如下:

CSS:

.imgWrapper {
    background-color: #000;
    height: 100%;
    min-height: 480px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    float: left;
}

.imgStg {
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 100%;
    min-height: 402px;
    position: relative;
    text-align: center;
    width: 100%;
}

.imgStg img {
    display: inline-block;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    width: auto;
    text-align: center;
}

HTML:

<div class="imgWrapper" style="width: 724px;line-height: 601px;">
    <div class="imgStg"> 
        <img src="http://placehold.it/500x300" style="width: 500px;height: 300px;"/>
    </div>
</div>

*注意601px的高度是在父元素中定义的

由于某些奇怪的原因，当我在 google chrome 和 firefox 中查看本地主机上的 HTML 文件时，图像在 div 的顶部而不是中心对齐。

fiddle :http://jsfiddle.net/5F3f3/1/显示正确，为什么/什么原因导致它显示在我机器的顶部？

问题截图:

Answer 1

首先 height 和 line-height 是不一样的。试试这段代码，
CSS:

    .imgWrapper {
    background-color: #000;
    height: 100%;
    min-height: 480px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    float: left;

}

.imgStg {
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 100%;
    min-height: 402px;
    position: relative;
    text-align: center;
    width: 100%;
}

.imgStg img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

HTML:

    <div class="imgWrapper" style="width: 724px;height: 601px;">
    <div class="imgStg"> 
        <img src="http://placehold.it/500x300" style="width: 500px;height: 300px;"/>
    </div>
</div>