如何实现响应式场景下文字在多设备尺寸中持续稳定居中

DevOps 小满

2026-10-4

问题原因

定位基准错误：.text-block 写在了 .container 外部，绝对定位元素找不到设置了position: relative的父级，只能相对整个视口定位，无法和图片保持相对居中。
水平定位单位使用错误：你用了vh（视口高度单位）设置左右边距，水平方向的适配应该用和宽度相关的单位，vh会随设备高度变化，完全不符合多设备宽度适配的需求。
text-align:center不生效：你用行内元素<span>包裹标题，行内元素宽度默认由内容撑开，内部的text-align属性不会生效。
white-space: nowrap的作用是强制文字不换行，和居中对齐没有任何关系，自然达不到你要的效果，反而会导致小屏幕下文字溢出容器。

修正方案

第一步：调整HTML结构

把.text-block挪到.container内部，让它的绝对定位以容器为基准：

<div class="container">
  <picture>
    <img src="https://picsum.photos/1920/1080" alt="哈勃望远镜背景" />
  </picture>
  <div class="text-block">
    <h1 class="title">Hubble Space Telescope</h1>
    <h2 class="subtitle">30 Years of Discovery</h2>
  </div>
</div>

第二步：调整CSS样式

用left: 50% + transform: translateX(-50%)的方案实现自适应水平居中，不需要设置固定左右边距：

.container{
  position: relative;
}
.container img {
  width: 100%;
  display: block;
}
.text-block {
  position: absolute;
  color: white;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: 90%;
}
.title, .subtitle{
  font-family: 'Poppins', sans-serif;
}