how can I center amp-img vertically? - html

Question

I'm trying to center an <amp-img> in a div vertically.
<div class="outer" style="height: 100vh">
<amp-img class="inner" layout="responsive"></amp-img>
</div>
So far I've tried these ways, but they don't work:
First
.outer {
display: flex;
justify-content: center;
align-items: center;
}
In this case, the image disappears.
Second
.outer {
line-height: 100vh
}
.inner {
display: inline-block;
vertical-align: center;
}
Also the image's size goes to 0 x 0 and the image disppears.
And so on
Other ways also make the image disppear or don't work as expected.
Is there a way to center <amp-img> vertically by any chance?

Answer 1

Your first example was very close to solution:
See example:
.inner{
flex-basis: 0;
-ms-flex-preferred-size: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.outer {
display: flex;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100vh
}
<div class="outer">
<amp-img class="inner" layout="responsive">your image</amp-img>
</div>