vertical-align 对进度条内百分比文字无效，因其仅作用于 inline 或 table-cell 元素；最稳方案是父容器设 height + display: flex + align-items: center；fallback 可用 absolute + transform(-50%,-50%)，但需确保父容器为 relative 定位且高度不塌陷。
vertical-align 对进度条里的百分比文字无效，它只对 inline 或 table-cell 元素起作用；而进度条常见结构是 div 套 div，默认是 block 流，所以直接写 vertical-align: middle 没反应。
用 flex 实现最稳，但父容器必须有高度约束
进度条容器（比如 .progress-bar）设 display: flex + align-items: center，就能让内部的百分比 span 垂直居中。前提是这个容器本身有明确高度——不能只靠内容撑开，得写死或用视口单位。
- 必须加
height（如height: 24px）或min-height，否则align-items: center无参考长度，不生效 - 别在百分比元素上同时写
margin: auto，尤其在 Safari 中会和 flex 居中打架，导致上下偏移 - 如果进度条高度由字体大小动态决定（比如
font-size: 14px），建议显式设height: 1.7em之类，避免计算波动
绝对定位 + transform 是兼容 fallback，但父容器要设 position
当进度条容器不能改 display（比如被第三方库锁定），可用 position: absolute 把百分比文字拉到中心。关键不是“怎么写”，而是“谁来当定位上下文”。
- 进度条容器必须设
position: relative，否则top: 50%会相对于整个 viewport 计算，滚动时文字飘走 - 百分比元素写
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，不要拆成translateX和translateY - 如果百分比文字宽高会变（比如数字位数变化、字体加载延迟），可能出现短暂闪动；可加
min-width: 2em或用font-variant-numeric: tabular-nums稳定宽度
line-height = height 只适用于单行纯文本，且极易破功
有人试过给百分比 span 设 line-height: 24px 并让容器也 height: 24px，看起来居中了。但这只是视觉巧合，隐患明显：
立即学习“前端免费学习笔记（深入）”；
- 一旦文字换行（比如百分比变成 “100%” 后加单位 “of total”），
line-height就失效，文字直接顶到顶部 - 字体渲染差异（尤其是 macOS 的 subpixel rendering）会让实际基线偏移，不同浏览器里“看起来居中”但像素级错位
- 如果用了
font-size: clamp()或响应式字号，line-height很难同步缩放，维护成本高
真正容易被忽略的是：所有方案都依赖“交叉轴有可测量长度”。进度条容器若高度塌陷（比如子元素浮动、或用了 display: contents），再好的 CSS 也白搭——先检查 computed height 是否为 0。
