如何实现页面标题居中对齐且避免与position absolute返回按钮重叠？

下面是几种可靠的解决方案，根据你的布局需求选择即可：

方案1：给标题容器添加左侧内边距（最简单直接） #

利用父容器相对定位固定按钮位置，给标题容器设置足够的左侧内边距，避开按钮的宽度范围，同时保持标题在剩余空间内居中。

<!-- HTML结构 -->
<div class="header-container">
  <button class="back-btn">返回</button>
  <h1 class="page-title">这是一段很长很长的页面标题文本，用来测试是否会和返回按钮重叠</h1>
</div>

/* CSS样式 */
.header-container {
  position: relative; /* 为绝对定位的按钮提供参照 */
  padding: 10px;
}

.back-btn {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中按钮 */
  width: 40px; /* 假设按钮宽度 */
}

.page-title {
  text-align: center;
  margin: 0;
  padding-left: 60px; /* 按钮宽度+额外间距，确保不重叠 */
  padding-right: 20px; /* 右侧也留些间距，优化视觉 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 可选：长标题单行省略 */
}

方案2：使用Flex布局（更灵活的现代方案） #

用Flex布局替代绝对定位，让按钮和标题自然分配空间，标题自动在剩余区域居中，从根源避免重叠。

<!-- HTML结构 -->
<div class="header-container">
  <button class="back-btn">返回</button>
  <h1 class="page-title">这是一段很长很长的页面标题文本，用来测试是否会和返回按钮重叠</h1>
</div>

/* CSS样式 */
.header-container {
  display: flex;
  align-items: center; /* 垂直居中所有元素 */
  padding: 10px;
}

.back-btn {
  flex-shrink: 0; /* 按钮不被压缩 */
  margin-right: 20px; /* 和标题保持间距 */
}

.page-title {
  flex: 1; /* 占据剩余所有空间 */
  text-align: center;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 可选：长标题单行省略 */
}

方案3：使用calc()计算标题偏移量 #

如果必须保留按钮的绝对定位，可通过calc()给标题设置左侧外边距，确保标题起始位置在按钮右侧。

.page-title {
  text-align: center;
  margin: 0;
  margin-left: calc(40px + 20px); /* 按钮宽度+间距 */
  width: calc(100% - 60px); /* 标题宽度减去左侧偏移，保证整体居中 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

注意事项 #

• 如果允许标题换行，可去掉white-space: nowrap，只保留overflow: hidden即可，长标题会自动换行且不与按钮重叠。
• 按钮的宽度如果是动态的，建议优先选择Flex布局方案，无需硬写固定数值。

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