如何实现文本相对于背景容器的稳定居中？解决窗口缩放偏移问题

首先，你遇到的窗口缩放时文本偏移、出现空隙的问题，根源在于绝对定位的参考容器错误：你的.textdiv用了position: absolute，但父容器.theimage没有设置position: relative，导致绝对定位是相对于整个浏览器窗口，而非黑色背景容器，窗口缩放自然就会错位。

下面是修正后的方案，完美实现文本在容器内居中，且窗口缩放时不会偏移：

修正后的CSS代码 #

.theimage {
  background-color: black;
  background-image: url('https://www.guidedogs.org.uk/media/5105/image-of-a-puppy-sitting-sap-homepage.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 300px;
  position: relative; /* 关键：让子元素的绝对定位以它为参考 */
}

.textdiv {
  position: absolute;
  left: 50%; /* 相对于父容器左侧偏移50% */
  top: 20%; /* 保持你想要的垂直位置 */
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现真正水平居中 */
  color: white;
  max-width: 80%; /* 可选：限制文本宽度，避免超出容器 */
}

修正后的HTML代码 #

<div class="theimage"></div>
<div class="textdiv">text texttext text text text text text textext texttext text text text text text text text text text text tetext texttext text text texttext text text text text text text text textexttext text text text text texttext text texttext text text text textext text text text text text text text text</div>

关键改动说明 #

• 给.theimage添加position: relative：这是绝对定位的核心，让子元素的absolute定位以父容器为基准，而不是窗口。
• 移除.textdiv的right: 20%：这个属性会强制文本宽度等于父容器宽度的80%，窗口缩放时容易出现空隙；改用transform: translateX(-50%)，通过偏移自身宽度的一半，实现真正的水平居中，无论文本宽度多少都能完美居中。
• 可选添加max-width: 80%：防止文本过长时超出容器边界，提升视觉效果。

这样修改后，文本就会牢牢相对于黑色背景容器居中，窗口缩放也不会再出现偏移和空隙问题啦！

内容的提问来源于stack exchange，提问作者Deke