flex布局下进度条文字对不齐，主因是容器未设align-items:center（水平）或justify-content:center（垂直），且填充块误用flex-grow导致宽度失真，应改用flex:0 0 auto并确保父容器尺寸明确。
flex 布局下进度条文字被截断或错位
文字对不齐，八成是 flex 容器没设 align-items: center，或者文字容器本身用了 white-space: nowrap 却没给足够空间。水平进度条常见于表单提交、文件上传，垂直的多见于仪表盘或状态面板——但两者的对齐逻辑其实一致：进度条轨道、填充块、文字三者必须共用同一套基线参考。
-
display: flex的父容器要加align-items: center（水平条）或justify-content: center（垂直条），否则文字默认按 flex-start 对齐，和进度块视觉脱节 - 文字元素别用
position: absolute硬拉，会脱离 flex 流，导致响应式时偏移加剧 - 如果文字内容长度不固定（比如 “已完成” / “处理中…”），建议把文字包裹在
div里并设flex: 0 0 auto，避免它被 flex 压缩变形
vertical-align 在 flex 容器里完全失效
vertical-align 只对 inline-level 元素和 table-cell 生效，一旦父级是 display: flex，它就彻底没用。很多人卡在这儿反复调 vertical-align: middle，结果毫无反应。
- 想垂直居中文字？直接在 flex 容器上设
align-items: center（主轴为水平时）或justify-content: center（主轴为垂直时） - 如果进度条方向是垂直的（
flex-direction: column），那文字的“水平居中”反而要靠align-items: center，别被名字带偏 - 某些 UI 库（如 Ant Design）的
Progress组件内部用了 flex，但暴露的类名可能覆盖了你的样式，检查 computed styles 看实际生效的是哪条规则
百分比宽度 + flex-grow 导致进度数值不准
用 width: 50% 控制进度，同时又给填充块设 flex-grow: 1，结果 50% 显示出来像 70%——这是因为 flex-grow 会抢占剩余空间，覆盖 width 的原始计算。
- 进度填充块必须用
flex: none或显式写flex: 0 0 auto，禁用弹性伸缩 - 推荐用
min-width: 0配合width，防止内容撑开（尤其文字很长时） - 垂直进度条同理：用
height而不是flex-grow控制填充高度，且父容器需设明确高度（比如height: 200px），否则height: 60%无参照
文字随进度动态居中但边缘模糊或抖动
用 transform: translateX(-50%) 或 left: 50% 居中文字，在某些浏览器（尤其是 Safari 和旧版 Chrome）会出现 subpixel 渲染问题，文字边缘发虚，拖动时轻微跳动。
立即学习“前端免费学习笔记（深入）”；
- 优先用 flex 原生居中（前面说的
align-items/justify-content），它走的是 layout 引擎，不触发重绘抖动 - 如果必须用 transform，加上
will-change: transform提前提示渲染层，但别滥用，可能引发内存占用升高 - 字体大小小于
12px时，所有居中方式都容易糊——这不是代码问题，是系统字体渲染限制，建议最低设为12px
真正难的不是让文字“看起来居中”，而是让它在各种缩放比例、DPR、字体加载时机下都稳定居中。很多时候问题不在 flex 写法，而在父容器的高度/宽度是否被其他 CSS（比如 margin collapse 或 unset 的 height）悄悄影响了。
