水平和垂直居中img

Question

I am trying to center an image vertically and horizontally inside a div. The structure is as follows:

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>

*Note that the height of 601px is defined in a parent element

For some odd reason when I view the HTML file on localhost in both google chrome and firefox the image is aligned at the top of the div, not the center.

The fiddle: http://jsfiddle.net/5F3f3/1/ is showing correctly, why/what is causing it to display at the top on my machine?

Screenshot of issue:

Answer 1

First of all height and line-height are not same. Try this code,
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

I believe your CSS is correct. Are you certain that it is being loaded correctly on localhost? I believe some browsers will give an error if the HTML is loaded via file:// scheme and the CSS is referenced via http:// scheme. Try referencing your CSS file as . This will make the browser use the same scheme as the HTML that references it.