Html 如何将两个图像水平和垂直居中放置在彼此的顶部？

我试图将两个图像放置在彼此的顶部，两个图像在容器内水平和垂直居中

其中一个图像将设置其不透明度动画，以显示下面的图像

这两张图片的大小都一样，但我事先不知道图片的大小。我还想在纯CSS和HTML中这样做

这就是我的结局

。数据框{
边框：2px实心#d4；
边界半径：3px；
显示器：flex；
高度：120px；
保证金：5px；
边缘底部：10px；
右边距：10px；
填充：0；
位置：相对位置；
宽度：120px；
}
.标志{
对齐项目：居中；
显示器：flex；
证明内容：中心；
保证金：自动；
位置：相对位置；
}
.数据名称{
位置：绝对位置；
宽度：100%；
高度：23px；
底部：0px；
右：0px；
背景：rgba（200,200,200,0.3）；
}
跨度{
位置：绝对位置；
宽度：100%；
底部：2px；
文本对齐：居中；
}
img{
位置：绝对位置；
}

Flickr

您能在div中设置img，并将后面的图像设置为div的背景吗

解决方案 将此添加到您的代码中：

img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

。数据框{
边框：2px实心#d4；
边界半径：3px；
显示器：flex；
高度：120px；
保证金：5px；
边缘底部：10px；
右边距：10px；
填充：0；
位置：相对位置；
宽度：120px；
}
.标志{
对齐项目：居中；
显示器：flex；
证明内容：中心；
保证金：自动；
位置：相对位置；
}
.数据名称{
位置：绝对位置；
宽度：100%；
高度：23px；
底部：0px；
右：0px；
背景：rgba（200,200,200,0.3）；
}
跨度{
位置：绝对位置；
宽度：100%；
底部：2px；
文本对齐：居中；
}
img{
位置：绝对位置；
排名：0；
左：0；
转换：翻译（-50%，-50%）；
}

Flickr

这不是最优雅的解决方案，但它可以：

img {
  position: absolute;
  transform: translate(-50%, -50%);
}

---

我认为您根本不需要flexbox：

.data框{位置：相对；显示：内联块；}
.logo{位置：相对；}
.彩色图像{位置：绝对；顶部：0；左侧：0；底部：0；右侧：0；不透明度：0.5；}
.数据名称{位置：绝对；左：0；右：0；底部：5px；文本对齐：中心；}

Flickr

我会直截了当地说。 下面是一个将两个图像集中在父对象中的示例

例
.家长{
保证金：自动；
宽度：500px；
高度：500px；
边框：3px实心#ccc；
}
.child1.child2{
宽度：50%；
身高：50%；
利润率：25%；
背景色：rgb（226,26,60）；
}
.儿童1{
不透明度：0.5；
}

这取决于两个图像大小相同的初始规格。