CSS边框与标题文本未对齐，请求居中对齐解决方案

你当前的问题是使用position: absolute后元素默认靠左对齐，导致边框和文本无法整体居中。以下是直接的修复方案：

核心修改代码 #

绝对定位元素需要额外属性实现水平居中，同时调整内边距让边框更好包裹文本：

#header-two-subheaders {
    position: absolute;
    top: 25%;
    /* 新增两行实现水平居中 */
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background-color: rgb(230, 205, 186);
    border: 1px solid rgb(230, 205, 186);
    border-radius: 5px;
    /* 增加内边距，让边框与文本间距更合理 */
    padding: 8px 16px;
    /* 可选：防止文本换行，保持单行居中 */
    white-space: nowrap;
}

关键说明 #

• left: 50%让元素左边缘对齐父容器水平中线，transform: translateX(-50%)将元素向左偏移自身宽度的一半，实现整体居中。
• 确保父容器设置position: relative，否则绝对定位元素会以整个页面为基准定位，无法匹配预期的居中范围。
• 调整padding可以让边框和文本的空白区域更贴合目标效果的视觉感受。

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