如何在section标签内实现绝对定位h1的左居中对齐

• 为.hero__title设置position: absolute后，元素脱离普通文档流，父元素的text-align、未搭配flex/grid布局使用的justify-content属性，都无法控制该元素的位置，这是之前调整无效的根本原因。
• 硬编码padding值做偏移的方案确实存在响应式适配缺陷，不同屏幕尺寸、不同字体渲染逻辑下都可能出现位置错位。

两种方案都可以实现垂直居中、水平靠左的对齐效果，可根据自己的代码习惯选择：

方案1：保留现有绝对定位逻辑 #

不需要改动原有DOM结构和布局基础，直接给标题加偏移规则即可：

.hero {
  width: 100%;
  height: 700px;
  position: relative;

  &__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  &__title {
    color: white;
    font-size: 6rem;
    position: absolute;
    /* 新增对齐规则 */
    left: 2rem; // 可按需调整左侧留空距离，使用rem/百分比等相对单位保证适配性
    top: 50%;
    transform: translateY(-50%); // 向上偏移自身高度的50%，实现精准垂直居中
    margin: 0; // 清除h1标签默认的上下外边距，避免出现位置偏差
  }
}

移动端适配时只需要在对应媒体查询里调整left值和标题字号即可，不会出现布局错乱。

方案2：Flex布局实现（更易维护） #

通过flex布局控制对齐，不需要计算偏移值，后续调整位置更方便：

.hero {
  width: 100%;
  height: 700px;
  position: relative;
  /* 新增flex布局规则 */
  display: flex;
  align-items: center; // 控制子元素垂直居中
  justify-content: flex-start; // 控制子元素水平靠左
  padding-left: 2rem; // 自定义左侧留空距离
  box-sizing: border-box; // 保证内边距不会撑大容器宽度

  &__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute; // 图片设为绝对定位作为背景层，不占用普通文档流位置
    inset: 0;
    z-index: 0;
  }

  &__title {
    color: white;
    font-size: 6rem;
    position: relative;
    z-index: 1; // 保证标题层级高于背景图，不会被遮挡
    margin: 0;
  }
}

如果你的需求是水平居中、垂直靠上/靠下的对齐效果，只需要互换对齐属性即可：设置align-items: flex-start/align-items: flex-end、justify-content: center，再按需调整边距值。

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