Bootstrap 进度条中使用绝对定位的文本常因垂直对齐不当导致底部或顶部被裁剪；正确做法是结合 top: 50% 与 transform: translateY(-50%) 实现精准垂直居中，并确保父容器具有 position: relative。
bootstrap 进度条中使用绝对定位的文本常因垂直对齐不当导致底部或顶部被裁剪；正确做法是结合 `top: 50%` 与 `transform: translatey(-50%)` 实现精准垂直居中，并确保父容器具有 `position: relative`。
在 Bootstrap（尤其是 v5.3+）中，进度条（.progress）默认为块级容器，但其内部若通过 position: absolute 定位文本（如技能标签），而未正确处理垂直居中逻辑，极易出现文字“只显示半截”——例如仅露出底部像素、顶部被裁切等视觉异常。根本原因并非 height 设置过小或 Bootstrap 自身 Bug，而是 CSS 绝对定位元素的垂直对齐方式不兼容行高与盒模型。
✅ 正确解决方案
关键在于放弃依赖 padding-top/padding-bottom 模拟居中（易受字体渲染、行高、父容器高度影响），改用现代、可靠的垂直居中技术：
.progress-type {
position: absolute;
left: 0;
top: 50%; /* 将元素顶部锚定在父容器垂直中心 */
transform: translateY(-50%); /* 向上平移自身高度的 50%，实现真正居中 */
padding: 0 30px 0 10px; /* 移除上下 padding，避免干扰垂直位置 */
font-weight: 400;
color: #fafafa;
background-color: rgba(25, 25, 25, 0.2);
}同时，必须为 .progress 添加 position: relative，否则绝对定位的 .progress-type 将相对于最近的定位祖先（可能是 <body>）偏移，造成错位：
<div class="progress position-relative"> <!-- ✅ 关键：启用相对定位上下文 -->
<div class="progress-bar" 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>? 提示：Bootstrap 5.3+ 已内置 position-relative 工具类（即 position-relative），推荐直接使用，语义清晰且无需额外 CSS。
⚠️ 注意事项
- 勿滥用 padding 控制垂直位置：padding: 3px 30px 2px 10px 中的上下内边距会随字体大小、行高变化而失效，且无法响应式适配。
- 确保父容器有明确高度：.progress { height: 25px; } 是合理的，但需与 transform 居中逻辑协同，而非替代它。
- 避免嵌套 position: absolute 冲突：确认 .progress-bar 本身未被意外设为 position: absolute，否则可能破坏布局流。
- 可访问性保留：.sr-only 元素用于屏幕阅读器，务必保留在 .progress-bar 内，不可移至 .progress-type 中。
✅ 最终结构建议（完整可运行）
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="progress position-relative" style="height: 25px; margin-bottom: 4px;">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"></div>
<span class="progress-type">HTML / HTML5</span>
</div>
</div>
</div>
</div>该方案兼容所有现代浏览器，响应稳定，且完全遵循 CSS 规范——绝对定位元素不参与文档流，因此必须显式建立定位上下文并采用 transform 精准控制位置。掌握这一模式，可举一反三解决各类覆盖层、徽章、标签的垂直居中问题。
