Html 如何垂直居中大于其父对象的对象？

我想实现如下示例：

---

我知道如何在css中使用背景图像，但我不想这样做，因为对象可能是任何东西。它可以是img、svg、canvas，甚至是div。还有其他解决方案吗？

我几年前写过如何做到这一点：

.box{
位置：绝对；/*或相对*/
/*假设框的高度限制低于图像高度*/
高度：100px；
/*与演示相关的样式：*/
保证金：自动；
顶部：0；右侧：0；底部：0；左侧：0；
背景：浅蓝色；
}
/*魔法：*/
.box>img{
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

试试这个：

.parent{
背景色：黑色；
高度：300px；
显示器：flex；
证明内容：中心；
位置：相对位置；
顶部：100px；
}
.img{
身高：150%；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}

---

假设父对象具有非静态位置，您可以执行以下操作：

.container{
高度：100vh；
宽度：100vw；
位置：相对位置；
}
.大img{
位置：绝对位置；
最高：50%；
左：50%；
转换：转换（-50%，-50%）
}

---

您可以使用img的对象拟合特性，这是一种更干净的解决方案

img {
  width: 100%;
  height: 100%
  object-fit: cover:
}

在

.wrapper{
显示器：flex；
对齐项目：居中；
高度：100vh；
填充：100px0；
}
霍德先生{
宽度：100%；
高度：200px；
背景：绿色；
文本对齐：居中；
位置：相对位置；
}
.中心{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}

照片无法打开您可能应该提到这是SCSS。