如何将amp-img垂直居中？

Question

我正在尝试将<amp-img>在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

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

查看示例：

{
"Games": [{
    "Name": "Warhammer 40k 8th Edition",
    "Factions": [{
        "Space Marines": {
            "Units": [{
                "Name": "Primaris Space Marine Captain",
                "Number": 1,
                "Cost": -1,
                "Ability": "When captain enters play you win",
                "AddOns": [{
                    "Name": "My AddOn",
                    "Cost": 0,
                    "Text": "Add an extra Captain",
                    "IsSelected": false
                }],
                "Gear": [{
                    "Name": "Frag Grenade",
                    "Cost": 0
                }]

            }]
        }
        }]
    }]
}

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