CSS Centering An Image

Question

Yes, I know this has been asked countless times and I've read just about every posting I can find but still no solution to my specific issue. On a classified ad site with thumbnail hovers to view the larger image, I need the hovered images to be centered horizontally on the page and vertically within the browser window. So far, when I get it centered horizontally in the browser, the vertical is centered on the page which is often far longer than the window so the images appear either off the screen or at the top edge. If I center it vertically, then it follows the hover horizontally and goes off the screen that way too.

The images, though similar in the HTML example below, are being loaded dynamically and can have varying heights which is part of the problem as I can't simply specify a height. It boils down to the last two CSS blocks with absolute, which causes the vertical centering to work but not the horizontal. Using fixed aligns horizontally but then it's often off the screen vertically. Any ideas?

<p><div class="image-container">
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2079.jpg" alt="hpim2079.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2079.jpg" alt="hpim2079.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2080.jpg" alt="hpim2080.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2080.jpg" alt="hpim2080.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2081.jpg" alt="hpim2081.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2081.jpg" alt="hpim2081.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2082.jpg" alt="hpim2082.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2082.jpg" alt="hpim2082.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2083.jpg" alt="hpim2083.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2083.jpg" alt="hpim2083.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2084.jpg" alt="hpim2084.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2084.jpg" alt="hpim2084.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2115.jpg" alt="hpim2115.jpg" width="70" height="53" /><img class="large-image-style" src="/images/classifieds/68/hpim2115.jpg" alt="hpim2115.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2116.jpg" alt="hpim2116.jpg" width="70" height="53" /><img class="large-image-style" src="/images/classifieds/68/hpim2116.jpg" alt="hpim2116.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2117.jpg" alt="hpim2117.jpg" width="70" height="53" /><img class="large-image-style" src="/images/classifieds/68/hpim2117.jpg" alt="hpim2117.jpg" width="323" height="244" /></a>
</div>

The CSS is fairly straightforward with

@media screen and (orientation: portrait) {
    img.ri { max-width: 90%; }
}

@media screen and (orientation: landscape) {
    img.ri { max-height: 90%; }
} 

.image-container {
    display: block;
    margin: 0 auto 25px auto;
    text-align: center;
    width: 85%;
}

a.mouseover-thumbnail-holder {
    position: relative;
}

.large-image-style {
    position: relative;
    top: auto; bottom: auto; left: 0; right: 0;
    margin: auto;
    background-color: #000000;
    border-radius: 25px;
    border: 10px double #FF0000;
}

a.mouseover-thumbnail-holder .large-image-style {
    position: absolute;
    display: inline-block;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    top: 50%;
    left: 50%;
    width: auto;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
}

a.mouseover-thumbnail-holder:hover  .large-image-style , a.mouseover-thumbnail-holder:active .large-image-style {
    position: absolute;
    z-index: 100;
    opacity: 1;
}

Answer 1

All you have to do is use margin: 0 auto; but make sure it has a width on the image