在图像的中心图标与flexbox

Question

我知道这可以使用绝对方法来实现，但只是想知道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;
}

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

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

谢谢！