如何将文字响应式固定在横幅图片底部居中？

你原代码的核心问题：

• position: fixed 是相对于浏览器视口定位，而非你的header容器，导致页面宽度变化时文字脱离横幅
• 用百分比 padding-top 定位会随页面宽度偏移，无法稳定固定在底部
• header固定高度405px，背景图在不同屏幕下易显示不全，响应性差

下面是能保证文字始终固定在横幅底部居中、适配全屏幕的实现方案：

优化后的代码 #

CSS #

header {
  width: 100%;
  /* 用aspect-ratio维持横幅宽高比（可根据原图比例调整） */
  aspect-ratio: 16 / 3;
  background-image: url(https://i.sstatic.net/3gSoi.png);
  background-position: center;
  /* 让背景图覆盖容器，保证不同屏幕下的完整显示 */
  background-size: cover;
  /* 设置相对定位，作为内部绝对定位元素的容器 */
  position: relative;
}

#banner {
  /* 相对于header绝对定位 */
  position: absolute;
  /* 贴住横幅底部，数值可按需调整 */
  bottom: 20px;
  /* 水平居中：先左移容器50%，再用transform拉回自身宽度的50% */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: 'Walt Disney Script', arial;
  /* 用vw单位让文字大小随屏幕宽度自适应 */
  font-size: 8vw;
  color: white;
  /* 防止文字超出横幅范围，可选 */
  max-width: 90%;
}

body {
  margin: 0;
  overflow-x: hidden;
}

HTML #

<header>
  <div id="banner">
    <p>Gramberland</p>
  </div>
</header>

关键细节说明 #

• position: relative 给header设置定位上下文，确保内部绝对定位元素不会脱离横幅容器
• left: 50% + transform: translateX(-50%) 是精准水平居中的经典方案，不受文字宽度影响
• aspect-ratio 替代固定height，让横幅在不同屏幕下自动维持宽高比，比固定高度更适配响应式需求
• font-size: 8vw 让文字大小随屏幕宽度缩放，避免大屏文字过大、小屏文字过小的问题

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