Html 在图像上水平和垂直居中放置（字体）图标

我需要在图像上覆盖一个麦克风图标（类似于水印）。需要将此图标水平和垂直居中。可以根据浏览器大小调整图像大小，但麦克风应始终居中

下面是我到目前为止看到的，但当图像调整大小时，麦克风图标并没有调整

img{
宽度：50%；
}
.特色img{
文本对齐：居中；
}
.特色img img{
边框：1px纯红；
}
.水印{
位置：绝对位置；
保证金：0自动；
左：-80px；
右：0；
最高：20%；
宽度：0%；
不透明度：0.8；
颜色：黑色；
字体大小：1000%；
}

---

添加

位置：相对到图像，并使用以下内容更新图标：

.watermark {
  position: absolute;
  margin: 0 auto;
  left: 50%; //added
  top: 50%; //added
  transform: translate(-50%, -50%); //added
  width: 0%; // removed
  opacity: 0.8;
  color: black;
  font-size: 1000%;
}

这就是你想要的吗？
使用以下代码：


.container{
位置：相对位置；
宽度：100%；
最大宽度：400px；
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：1；
}
.图标{
颜色：白色；
字体大小：10vw；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
文本对齐：居中；
}

若要垂直居中图标，请添加到.watermark{transform:translateY（-50%）；top:50%；}，若要水平居中，.watermark宽度应与psuedo元素（：：before）相同，并将其设置为左0而不是-80px，这非常适合我的需要。谢谢