文字必须直接写在.progress-bar内并用绝对定位居中，同时同步更新aria-valuenow与style.width，并适配条纹背景尺寸以确保兼容性。
文字写在 .progress-bar 里，别放外面
进度条内文字不居中，90% 是因为把文字写在了 .progress 容器里，而不是直接塞进 .progress-bar 标签内部。Bootstrap 的 .progress-bar 默认是空的块元素，它只管背景色和宽度，不会自动渲染或定位文本节点。
正确做法是：<div class="progress-bar">75%</div> —— 文字必须作为 .progress-bar 的子文本节点存在。如果用伪元素、<span> 外挂、或者放在 .progress 下层再绝对定位，容易被裁切、错位，或在窄进度时文字溢出。
额外注意：.progress 父容器需有足够高度（Bootstrap 5 默认 height: 1rem ≈ 16px），太小会撑不开文字；建议显式加 style="height: 24px;" 或用自定义类确保可读性。
用 transform: translate(-50%, -50%) 真正居中
仅靠 text-center 或 line-height 无法应对宽度动态变化的进度条——文字会随 width 缩放而偏移，尤其在低百分比（如 5%）时明显左飘。
可靠方案是给文字加一层绝对定位包装，并用标准垂直居中模式：
- 确保
.progress有position: relative（Bootstrap 5.3+ 默认已加，但显式写上更稳） - 文字容器设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 移除上下
padding，避免与transform叠加造成二次偏移 - 别依赖
line-height: 24px强制对齐——字体渲染差异会导致小屏文字被截掉上半部分
这个组合不依赖字体度量，兼容所有字号和断点，是目前最鲁棒的居中方式。
aria-valuenow 和 style.width 必须同步更新
JS 动态修改进度时，如果只改 element.style.width = "68%"，视觉可能不动或卡顿，因为屏幕阅读器和部分浏览器会依据 aria-valuenow 做辅助渲染，且某些 CSS 过渡（如 transition: width）也依赖属性一致性。
每次更新都要配对操作：
bar.style.width = "68%";bar.setAttribute("aria-valuenow", "68");
漏掉任一者，可能导致：文字位置“跳变”、无障碍工具读错数值、动画中断、甚至在 Safari 中渲染异常。高频更新（如上传进度）建议加节流，并校验值在 0–100 范围内。
条纹（.progress-bar-striped）和文字共存要小心
.progress-bar-striped 依赖 SVG 背景图案，其默认高度固定为 1rem。如果你调高了 .progress-bar 的 height（比如设成 24px），条纹会被纵向拉伸、模糊甚至消失——这不是 bug，是 background-size 没同步更新。
两种解法：
- 加 CSS 覆盖：
background-size: 1rem 24px;（宽高按实际 height 设） - 改用 Bootstrap 5 提供的 CSS 变量：
--bs-progress-bar-height: 24px;，它会自动适配条纹尺寸
注意：.progress-bar-striped 和 .progress-bar-animated 可共存，但动画流动效果在文字居中后可能干扰阅读，建议文字用 opacity 过渡缓入，避免突兀闪现。
