正确结构是文字作为.progress-bar的子文本节点直接存在；需确保CSS居中（flex或absolute+transform）、同步更新style.width和aria-valuenow、满足高度/颜色/类名等显示条件。
文字必须写在 .progress-bar 标签内部，不能放外面
很多人把文字塞进 .progress 容器里，比如：<div class="progress">
<div class="progress-bar"></div>50%</div>——这会导致文字脱离进度条宽度范围，无法随进度缩放，还容易被裁切或错位。正确结构是文字作为 .progress-bar 的子文本节点直接存在：
<div class="progress"><div class="progress-bar">50%</div></div>- Bootstrap 5 默认给
.progress-bar设了display: flex; align-items: center; justify-content: center;，所以只要不覆盖这些样式，文字天然水平垂直居中 - 若用了自定义 CSS（比如重写了
display或去掉了justify-content），居中会立即失效
position: absolute + transform 是更稳的居中方案
Flex 居中在某些场景下不可靠：比如父容器高度被压缩、字体行高干扰、或你同时用了 transition: width 导致文字“晃动”。这时推荐用绝对定位手动居中：
- 确保外层
.progress有position: relative（Bootstrap 5.3+ 默认已加，但显式写上更稳妥） - 给文字包裹一层
<span class="progress-value">65%</span>，并设：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 避免用
line-height强制居中——它依赖字体度量，在响应式或换字体时极易偏移 - 如果文字被截掉上半部分，大概率是漏了
transform: translateY(-50%)，只写了top: 50%
同步更新 style.width 和 aria-valuenow 才算真正生效
只改 DOM 的 style.width 值，进度条视觉不动？90% 是因为没同步更新可访问性属性。屏幕阅读器和自动化测试都依赖 aria-valuenow，而浏览器渲染也常以它为依据触发重绘。
- JS 更新时必须两步一起做：
bar.style.width = "72%"; bar.setAttribute("aria-valuenow", "72"); - 若用 jQuery：
$bar.css("width", "72%").attr("aria-valuenow", 72); - 值必须是纯数字（不带 %），否则
aria-valuenow语义错误 - 高频更新（如每秒刷新）建议加节流，且校验数值是否在
aria-valuemin和aria-valuemax范围内
文字被截断或颜色看不清？检查这几个硬性条件
即使结构和 JS 都对了，文字仍显示不全或发灰，往往卡在几个基础但易忽略的点上：
-
.progress默认高度是1rem（约 16px），太小撑不开文字——至少设height: 1.5rem或用min-height: 1.5rem - 深色背景进度条（如
bg-dark）上文字默认是黑色，必须加text-white fw-bold提升对比度 - 若用了
striped类，别再加animated——Bootstrap 明确禁止二者共存，会导致动画异常甚至文字抖动 - 不要给外层
.progress加text-center：它会让文字整体居中，但不会随进度条宽度变化而动态居中，反而造成偏移
