Bootstrap进度条文本标签无法全局居中问题求助

问题出在你把文本容器和进度条容器放在了同一个flex布局的.progress容器里，两者属于同级的flex项目。当进度条宽度增加时，会挤压文本容器的可用空间，导致文本的居中是相对于剩余空间，而非整个进度条容器，所以会出现偏移。

修改方案： #

1. 给.progress容器添加相对定位，作为绝对定位文本容器的参照
2. 把文本容器设置为绝对定位，让它覆盖整个进度条容器，再进行居中

修改后的HTML代码：

<div class="progress" style="height: 30px; position: relative;">
  <div
    id="theprogressbar"
    class="progress-bar progress-bar-striped bg-success"
    role="progressbar"
    style="width: 0%; transition: none"
    aria-valuenow="0"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
  <div id="theprogressbartext" class="d-flex justify-content-center align-items-center h-100 position-absolute top-0 left-0 right-0">0/0</div>
</div>

JavaScript代码无需修改，保持原来的更新逻辑即可。

原理说明： #

通过position: absolute让文本容器脱离文档流，top-0 left-0 right-0使其覆盖整个.progress容器的宽度和高度，再用flex布局的justify-content-center和align-items-center实现文本在整个进度条范围内的居中。绝对定位的文本容器层级默认高于进度条，所以不会被进度条遮挡，能正常显示在上方。

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