bootstrap 进度条中使用绝对定位的标签文字常因垂直对齐不当而显示不全（仅见下半部分），根本原因在于未正确居中绝对定位元素，而非高度或 bootstrap 版本问题。

bootstrap 进度条中使用绝对定位的标签文字常因垂直对齐不当而显示不全（仅见下半部分），根本原因在于未正确居中绝对定位元素，而非高度或 bootstrap 版本问题。

在 Bootstrap 5+ 中，.progress 默认为相对定位容器（但需显式声明 position-relative 以确保子元素绝对定位有效），而 .progress-type 类若仅靠 padding 和固定 top 值（或完全未设 top）进行“伪居中”，极易导致文字基线偏移、顶部被裁切——尤其当字体行高与容器高度不匹配时，视觉上仅显示文字下半部。

正确解法是采用CSS 垂直居中标准模式：top: 50% + transform: translateY(-50%)。该方案不依赖字体度量，兼容所有字体和字号，且避免了 line-height 或 flex 等可能干扰进度条原生结构的方案。

✅ 正确 CSS 写法如下：

.progress-type {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 30px 0 10px; /* 移除上下 padding，仅保留水平内边距 */
  font-weight: 400;
  color: #fafafa;
  background-color: rgba(25, 25, 25, 0.2);
}

⚠️ 关键注意事项：

• 必须为 .progress 容器添加 position-relative（Bootstrap 5.3+ 已默认包含，但显式声明更稳妥）；
• 移除 padding-top/padding-bottom，否则会叠加 transform 偏移，造成二次错位；
• 避免使用 line-height: 25px 强制居中——它在响应式场景下易失效，且与字体渲染兼容性差；
• .sr-only 元素无需修改，其语义化辅助功能不受影响。

? 完整 HTML 结构示例（含 Bootstrap 5.3 CDN）：

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="progress position-relative">
        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
          <span class="sr-only">90% Complete</span>
        </div>
        <span class="progress-type">HTML / HTML5</span>
      </div>
    </div>
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

总结：文字被截断本质是绝对定位元素垂直对齐失控，而非 Bootstrap Bug 或 IDE 差异。采用 top: 50% + transform: translateY(-50%) 是最健壮、语义清晰且跨浏览器兼容的解决方案，应作为 Bootstrap 自定义进度条标签的首选居中策略。