ng-bootstrap 1.0进度条：如何将数值文本居中于整个进度条

我来帮你排查下代码失效的原因，以及给出可行的解决方案：

问题根源分析 #

你的代码没生效主要有两个核心原因：

1. 父容器缺少相对定位：你给.progress-text设置了position: absolute，但它的父容器（ng-bootstrap生成的.progress元素）默认没有position: relative属性。绝对定位的元素会相对于最近的有定位属性的父元素来定位，没有的话就会相对于页面根节点，自然没法在进度条范围内居中。
2. 文本被进度层覆盖：ng-bootstrap的进度填充条（绿色部分）默认层级比你的文本高，就算定位对了，文本也会被挡住看不到。

修复方案 #

1. 调整CSS样式 #

修改你的样式，给进度条容器加上相对定位，同时优化文本的居中方式和层级：

/* 给ngb-progressbar的内部.progress容器添加相对定位 */
ngb-progressbar .progress {
  position: relative;
}

.progress-text {
  color: #000;
  font-weight: 700;
  position: absolute;
  /* 垂直水平居中的最优写法 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  /* 确保文本在进度填充层上方 */
  z-index: 1;
}

2. 保持模板代码（无需修改） #

你的模板代码是对的，showValue="false"已经关闭了默认的数值显示，只需要保留自定义的文本节点：

<ngb-progressbar type="success" showValue="false" [value]="data?.progress" [striped]="false" [animated]="false">
  <span class="progress-text">{{data?.progress}}%</span>
</ngb-progressbar>

额外注意（Angular组件样式封装问题） #

如果你的样式是写在Angular组件的styles数组里，可能会因为组件样式封装导致无法穿透到ng-bootstrap的内部元素，这时候需要用:host ::ng-deep来修改：

:host ::ng-deep ngb-progressbar .progress {
  position: relative;
}

:host ::ng-deep .progress-text {
  color: #000;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 1;
}

这样修改后，数值文本就会完美居中在整个进度条的范围内，不会被绿色进度层遮挡，完全符合你红框位置的需求。

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