CSS Centering An Image - html

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

Answer 2

I think this might work for you. Instead of setting position: relative on the a.mouseover-thumbnail-holder element that encloses the image, let the positioning use the root element as the reference point by setting position: fixed on .large-image-style.
If you set all the offsets to zero and then use margin: auto on the image, it will center itself vertically and horizontally in the view port.
.image-container {
display: block;
margin: 0 auto 25px auto;
text-align: center;
width: 85%;
border: 1px dotted blue;
}
a.mouseover-thumbnail-holder .large-image-style {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0;
background-color: #000000;
border-radius: 25px;
border: 10px double #FF0000;
pointer-events: none;
transition: all 2s ease;
}
a.mouseover-thumbnail-holder:hover .large-image-style,
a.mouseover-thumbnail-holder:active .large-image-style {
opacity: 1;
}
.filler {
height: 500px;
border: 1px dotted blue;
}
<div class="filler">Top Filler...</div>
<div class="image-container">
<a class="mouseover-thumbnail-holder">
<img src="http://placehold.it/69x52" />
<img class="large-image-style" src="http://placehold.it/323x244" />
</a>
<a class="mouseover-thumbnail-holder">
<img src="http://placehold.it/69x52" />
<img class="large-image-style" src="http://placehold.it/523x244" />
</a>
<a class="mouseover-thumbnail-holder">
<img src="http://placehold.it/69x52" />
<img class="large-image-style" src="http://placehold.it/323x444" />
</a>
</div>
<div class="filler">Bottom Filler...</div>