如何垂直居中amp-img？

Question

我正尝试将垂直居中放置在div中。

<div class="outer" style="height: 100vh">
  <amp-img class="inner" layout="responsive"></amp-img>
</div>

到目前为止，我已经尝试了这些方法，但它们不起作用：

第一

.outer {
  display: flex;
  justify-content: center;
  align-items: center; 
}

在这种情况下，图像会消失。

第二

.outer {
  line-height: 100vh
}

.inner {
  display: inline-block;
  vertical-align: center;
}

此外，图像的大小为0 x 0，然后图像就消失了。

诸若此类

其他方法也会使图像分散或不能按预期工作。

有没有办法让<amp-img>垂直居中呢？

Answer 1

您的第一个示例非常接近解决方案：

请参见示例：

​

 .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>

​