Html 使用flexbox将图标居中放置在图像上方

我知道这可以通过使用绝对方法来实现，但我只是想知道在图像上是否有一个居中图标的Flexbox执行（这样你就有了不同大小图标的灵活性）

我可以用背景图像来做，但是有没有办法用

img

标签来做呢

<div class="container">
    <i class="icon-class"></i>
</div>

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    background: url(img.jpg) 50% / 100px;
}

.集装箱{
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
对齐项目：居中；
高度：100px；
宽度：100px；
背景：url（img.jpg）50%/100px；
}

到目前为止，我唯一想到的是：

<div class="container">
    <img src="img.jpg" width="100" class="img">
    <i class="icon"></i>
</div>

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
}

.img {
    position:absolute;
    left:0;
}

.icon {
    z-index:1;
}

.集装箱{
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
.img{
位置：绝对位置；
左：0；
}
.图标{
z指数：1；
}

---

谢谢

Flex Box与此形成对比，是您想要实现的目标。它们用于并排布置不同的箱子。他们试图以这种方式调整这些框，使它们不会重叠。您缺少的是容器上的大小和位置：相对于图标上的触发器z索引