Bootstrap 5 中文字直接写入 <div class="progress-bar"> 标签内即可自动居中，依赖其默认 display: flex、align-items: center 和 justify-content: center；需确保未覆盖这些样式，且 aria-valuenow、style="width" 与文本内容三者一致。
文字直接写在 <div class="progress-bar"> 里就行
Bootstrap 5 默认用 flex 布局让文字居中，不需要额外 CSS。只要把文字（比如 75%）塞进 <div class="progress-bar"> 标签内部，它就会自动水平垂直居中——前提是没覆盖掉默认样式。
常见错误是把文字放在 <div class="progress"> 外面，或者用 <span> 包一层再塞进去，结果破坏了 flex 居中逻辑，导致文字偏上、偏左或换行。
-
aria-valuenow和style="width: X%"必须一致，否则读屏器和视觉进度对不上 - 别给外层
<div class="progress">加text-center，这会让文字整体居中，但不随进度条缩放 - 如果文字被截断，优先加
min-width: 2em而不是强行调高font-size
为什么有时候文字不居中？
大概率是样式被覆盖了。Bootstrap 5 的 .progress-bar 默认有 display: flex、align-items: center、justify-content: center，三者缺一不可。
检查这几处：
立即学习“前端免费学习笔记（深入）”；
- 是否全局重写了
.progress-bar的display，比如改成block或inline - 是否设置了
line-height，尤其当line-height小于容器高度时，文字会下沉 - 是否用了
position: absolute类或自定义定位，这会脱离 flex 流程 - 是否在父级
.progress上设了height过小（比如4px），而没同步调整.progress-bar内部排版空间
progress-bar-striped 和文字能共存吗？
能，而且完全不影响文字渲染。条纹背景是 SVG 或线性渐变，画在底层，文字在上层，互不干扰。
但要注意：条纹图案宽度固定为 1rem，如果你把进度条高度设得很小（比如 height: 6px），条纹会被压扁甚至看不见。这时候要么调大高度，要么手动改 background-size：
.progress-bar-striped {
background-size: 0.5rem 0.5rem;
}
另外，动画条纹（progress-bar-animated）也兼容文字，无需额外处理。
动态更新时文字和进度怎么同步？
JS 更新必须三步一起动：width、aria-valuenow、文本内容。漏掉任意一个，可访问性或显示都会出问题。
推荐写法（jQuery 示例）：
$bar.css('width', '82%')
.attr('aria-valuenow', 82)
.text('82%');
纯 JS 也类似：
el.style.width = '82%';
el.setAttribute('aria-valuenow', 82);
el.textContent = '82%';
别用 innerHTML 替换整个标签，那会丢掉事件绑定或数据属性；也别只改 textContent 不动 aria-valuenow，这是无障碍硬伤。
aria-valuenow 和 width 的一致性 —— 它不光影响屏幕阅读器，还可能触发某些 ARIA 检测工具报错，上线前务必肉眼核对一遍。 
