如何使用CSS实现头部元素居中？多种尝试均未生效

核心问题定位 #

• 绝对定位元素如果只设置bottom值、宽度由内容撑开、未配置水平方向定位规则，会停留在普通文档流的默认水平位置（页面最左侧），完全不会触发居中效果
• 现有.down的CSS写法不规范：属性名首字母大写（Position、Bottom），虽然多数浏览器能容错识别，但属于易引发小众环境兼容问题的写法，需统一改为小写
• 当前html/body未设置height:100%，绝对定位的垂直位置是相对于视口计算的，不会随页面滚动偏移

修复实现 #

方案1：复用项目已有的绝对定位居中逻辑 #

修改.down类的CSS代码，补全水平居中规则：

.down {
  position: absolute;
  bottom: 85%;
  /* 新增水平居中配置 */
  left: 50%;
  transform: translateX(-50%);
}

和.btn-grp的居中逻辑同源，因为已经用bottom固定了垂直位置，只需要沿X轴偏移自身宽度的50%即可实现对齐

方案2：无计算偏移的文本居中方案 #

不需要手动计算元素宽度偏移，通过容器占满整行、继承文本居中属性实现效果：

.down {
  position: absolute;
  bottom: 85%;
  /* 新增居中配置 */
  width: 100%;
  text-align: center;
}

这种方式对不同长度的标题内容适配性更好，不会因为标题宽度变化出现居中偏差。

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