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 自定义进度条标签的首选居中策略。
