Html 在响应图像中居中文本

我正在尝试为网页制作一个展示区。它由一个具有（响应）背景图像的div和一个在该图像上水平和垂直居中的标题组成。我已经成功地将图像导入并使其响应，并且使标题居中，但是当窗口变小时，问题就出现了

我使用position:absolute、top属性和transform使其居中，但top属性仅在父容器中指定了height时才起作用。但是，当窗口收缩到图像开始收缩到低于其原始高度的点时，文本不会保持垂直居中，而是保持水平居中（因为我要偏离顶部的原始高度（800px））

我不能仅仅通过媒体查询来更改高度，因为图像大小不断变化，我不能使用height，因为top属性根本不起作用，所以我对如何解决这个问题有点困惑

以下是我的代码的相关部分：

HTML:

---

我可能只是猜测，因为我不知道这到底是什么样子，但我假设了一些事情，因此我会使用普通图像而不是背景图像，将其块化并在其上显示div，您将保留任何大小的高度，请看：

.showcase容器{
宽度：80%；
保证金：0自动；
填充：0；
位置：相对位置；
}
.展示容器img{
显示：块；
宽度：100%；
高度：自动；
保证金：0自动；
最大宽度：1200px；
}
.居中{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：#fff；
边界半径：5px；
填充：10px 20px；
}

BR建筑师

请参阅MDN的文档

<figure>
    <img src="/media/examples/hamster.jpg" alt="a cute hamster" />
    <figcaption>Hamster by Ricky Kharawala on Unsplash</figcaption>
</figure>

里基·哈拉瓦拉的《仓鼠》在《无鞭笞》中

如果我理解正确，你是说你不必担心图像总是保持800px的高度，你只希望h1保持居中。在这种情况下，它真的很简单

只需将您的图像添加为背景，将背景大小设置为覆盖，然后通过将其高度设置为100vh，确保容器永远不会大于窗口，但通过设置其最大高度，确保容器永远不会高于800px

.showcase-container {
  /* your styles here */
  background-image: url('yourimage.jpg');
  background-size: cover;
  height: 100vh;
  max-height: 800px;
}

---

或者，如果您需要它独立于容器在窗口中垂直居中，您可以始终更改

top:50%至<代码>顶部：50vh和相对于车身的位置。
这非常有效。我唯一改变的是将showcase容器的宽度设为100vw，并添加一些负的左边距，因为我希望图像缩小到该点时与页面的侧面齐平。
<figure>
    <img src="/media/examples/hamster.jpg" alt="a cute hamster" />
    <figcaption>Hamster by Ricky Kharawala on Unsplash</figcaption>
</figure>

.showcase-container {
  /* your styles here */
  background-image: url('yourimage.jpg');
  background-size: cover;
  height: 100vh;
  max-height: 800px;
}