您可以按照Rene在评论中的建议使用vmin。但是，我会在clamp函数中使用它，这允许您指定最小值，理想值和最大值。您可以使用这些值并找到最适合您的值！
此外，对于简单的叠加，我只使用网格而不是绝对位置，因为您不必以这种方式弄乱堆叠上下文。

.container {
  display: grid;
  place-items: center;
}

.container * {
  grid-area: 1 / 1;
}

.container-text {
  color: white;
  font-size: clamp(3rem, 10vmin, 6rem);
}

<div class="container">
  <img src="https://loremflickr.com/640/360" alt="placeholder">
  <div class="container-text">
    Overlay text
  </div>
</div>

试试这个CSS：

.sensor {
position: relative;
width: 100%;
}

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

.img-max {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
transform: translate(-50%, -50%) scale(1);
}

问题是，当图像调整大小时，文本保持固定在其位置。要解决这个问题，您可以使用CSS的“transform”属性的图像元素，以及，使其大小的变化成比例的图像调整大小。可以使用“translate”值进行X和Y轴位移，使用“scale”值进行图像大小调整。这将使文本相对于图像动态居中。