如何在Firewatch CSS视差封面(parallax__cover)中居中文字？

针对你提到的外层.parallax容器宽于视口且从左侧1500px开始的情况，常规居中方法失效是因为文字会相对于过宽的父容器对齐，而非视口。以下是几种可行方案：

方案1：固定定位脱离父容器（适合不随视差滚动的文字） #

直接让文字元素相对于视口定位，完全脱离父容器的布局影响：

.parallax__cover .centered-text {
  position: fixed;
  left: 50%;
  top: 50%; /* 可选，实现垂直居中 */
  transform: translate(-50%, -50%);
  margin: 0;
}

HTML结构示例：

<div class="parallax__cover">
  <div class="centered-text">你的居中文字</div>
</div>

方案2：利用视口单位计算偏移（适合随视差滚动的文字） #

通过calc计算文字相对于.parallax__cover的偏移量，对齐视口中心：

.parallax__cover .centered-text {
  margin-left: calc(50vw - 1500px);
  /* 垂直居中可搭配以下样式 */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

方案3：修改父容器定位逻辑（推荐，不破坏视差效果） #

将.parallax__cover的left: 1500px替换为transform: translateX(1500px)，再用flex布局实现文字居中：

.parallax__cover {
  position: absolute;
  width: 3000px;
  /* 替换原有left属性 */
  transform: translateX(1500px);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 确保垂直居中生效 */
}

此时只需在.parallax__cover内直接添加文字即可：

<div class="parallax__cover">
  <span>你的居中文字</span>
</div>

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