Bootstrap进度条内文字居中显示需将文字直接写入.progress-bar标签内，利用其默认flex布局自动居中；若失效则检查是否覆盖display:flex、align-items:center和justify-content:center样式，或存在line-height干扰。
Bootstrap 进度条怎么让文字显示在条内而不是下面？
默认情况下，<div class="progress"> 里的 <code><div class="progress-bar"> 如果直接塞文字（比如 <code><span>50%</span>），文字会撑开容器、换行或溢出——这不是“条内居中显示”的预期效果。关键在于：必须给进度条元素设置 position: relative（Bootstrap 5 已内置），且文字需用绝对定位 + 居中对齐。
- 确保父容器是
<div class="progress">，子元素是 <code><div class="progress-bar">，不要漏掉 <code>role="progressbar"和aria-valuenow属性（可访问性必需） - 文字内容必须写在
<div class="progress-bar"> 标签内部，不能放在外面 <li>如果文字不居中，检查是否误加了 <code>text-center到外层<div class="progress"> ——这会让文字整体居中但无法随进度条宽度缩放，应避免 <h3>Bootstrap 5 中 <code>progress-bar内嵌文字的最小可行写法以下是最简且兼容的 HTML 结构，适用于 Bootstrap 5.3+：
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"> 65% </div> </div>这段代码能直接工作，因为 Bootstrap 5 的
.progress-bar默认含display: flex、align-items: center和justify-content: center，文字天然垂直水平居中。无需额外 CSS —— 但前提是没覆盖这些样式。- 若用了自定义主题或重写了
.progress-bar，请确认保留了display: flex和两个center声明 - 文字过长（如 “已完成：65/100 项”）会溢出，此时建议用
font-size: 0.75rem或加white-space: nowrap; overflow: hidden; text-overflow: ellipsis - 不要给文字加
class="sr-only"，否则就真看不见了
为什么加了文字后进度条高度变矮或错位？
常见原因是文字节点触发了行盒（line box）计算，尤其当字体大小、行高未显式约束时，
flex容器可能因基线对齐（align-items: baseline）产生偏移。Bootstrap 5 默认是center，但某些 CSS 重置库（如 Normalize.css 旧版）或全局line-height设置会干扰。- 强制修复方式：在
.progress-bar上加line-height: 1或line-height: inherit - 避免使用
<small></small>或<sup></sup>等内联元素包裹文字——它们自带 vertical-align 和 line-height，易破坏居中 - 如果用 SCSS 自定义进度条，注意
$progress-height和$progress-font-size的比例关系；字体太大时，height不足以容纳文字，就会裁剪
需要动态更新文字和宽度时，JS 怎么安全操作？
直接改
style.width和textContent即可，但要注意 DOM 更新时机与动画冲突。Bootstrap 的进度条动画靠transition: width 0.6s ease实现，若 JS 频繁修改，可能卡顿或跳变。- 推荐做法：用
element.style.width = "72%"; element.textContent = "72%";—— 一次赋值，避免 reflow - 不要用
innerHTML插入带标签的文字（如<strong>72%</strong>），会破坏 flex 居中逻辑，除非同时加align-self: center等样式 - 若需百分比以外的文字（如 “上传中…”），记得同步更新
aria-valuetext属性，例如：bar.setAttribute('aria-valuetext', '上传中…')，否则屏幕阅读器仍读 “72%”
aria-valuetext的同步更新，以及在响应式断点下字体缩放导致文字溢出——这两处问题往往只在测试阶段暴露，上线后才被反馈。 - 若用了自定义主题或重写了
