水平和垂直居中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中查看localhost上的HTML文件时，图像在div的顶部而不是中心对齐。

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

问题截图：

Answer 1

首先，高度和线高不一样。试试这个代码，
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>

Answer 2

我相信你的CSS是正确的。您确定它是在localhost上正确加载的吗？我相信如果通过file：// scheme加载HTML并且通过http：// scheme引用了CSS，则某些浏览器会出错。尝试将您的CSS文件引用为。这将使浏览器使用与引用它的HTML相同的方案。