Aligning vertically absolute element larger than container in Firefox - css

Question

I finally got the problem where my search-fu is not enough. I made some gallery carousel with fixed height and width with image list inside (displaying one li at time). Images are positioned absolute (with margin:auto etc) inside relative li element.
Images often are larger than its container which has overflow:hidden. Images have max-width:100% It creates a desired effect that smaller images are centered within container and larger (higher) are cropped which can be opened for full version.
.gallery-items>li {
padding:0;
margin:0;
width:100%;
height:100%;
text-align:center;
position:relative;
overflow:hidden;
}
.gallery-items>li img {
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
max-width:100%;
max-height:none;
height:auto;
width:auto;
position:absolute;
}
fiddle here http://jsfiddle.net/fW63c/1/
It works great (center of the image is in the center of container) in IE8, IE9, Opera 12/15, Chrome but in Firefox the larger images start with the beginning of the container (like it would have top:0. Does anyone have any idea how to make it work in FF (preferably just using css) . Thanks in advance for any solution, Fafel

Answer 1

Best way to do it if you don't have to support IE8 or older is to translate the image vertically. This method works in all major browsers, including IE9+:
img {
top: 50%;
transform: translateY(-50%);
}
https://jsfiddle.net/6n2vu7zd/1/

Answer 2

This one has been troubling me quite a bit, but eventually I found that setting top: -100%; and bottom: -100%; will have the desired effect.
Normally the following will work just fine:
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
But in Firefox, if the parent is not as tall as the child it will simply decide to align them at the top. But this will work:
.child2 {
position: absolute;
left: 0;
right: 0;
top: -100%;
bottom: -100%;
margin: auto;
}
I created a demo to demonstrate:
There are two examples, the first will be wrong in Firefox but both will look fine in Chrome, Edge, and IE.
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.child2 {
position: absolute;
left: 0;
right: 0;
top: -100%;
bottom: -100%;
margin: auto;
}
.parent {
margin: 30px;
position: relative;
display: inline-block;
width: 100px;
height: 25px;
background-color: yellow;
}
<div class="parent">
<img width="75" heigh="75" class="child" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>
<div class="parent">
<img width="75" heigh="75" class="child2" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>