text-align: center 失效是因为未限制宽度且内容无法折行；需同时设置 width/max-width、overflow-wrap: break-word 和 text-align: center 才能实现折行居中。
label 文字过长时，text-align: center 为什么没用？
因为 text-align: center 只控制「行内内容在块容器内的水平对齐」，它不解决换行问题。如果 label 宽度撑满父容器、且内容是一整段无空格的长字符串（比如超长 URL 或驼峰变量名），浏览器根本不会折行——文字溢出或横向滚动，居中自然失效。
让 label 折行 + 居中的最小可行组合
必须同时满足三个条件：允许折行、限制宽度、保持文本居中。推荐用以下 CSS：
.label-wrap {
width: 240px; /* 必须设宽度或 max-width */
word-break: break-word; /* 兜底：强制在任意位置断开（慎用） */
overflow-wrap: break-word; /* 推荐：优先在空格 / 标点 / <wbr> 处断 */
text-align: center;
}-
width或max-width是前提，否则浏览器按内容自动撑宽，无“行”可居中 -
overflow-wrap: break-word比word-break: break-all更安全，不会把https://api.example.com切成https://api.exa… - 若需更精细控制断点，在 HTML 中插入
<wbr></wbr>，例如：user<wbr>ID<wbr>Token</wbr></wbr>、admin@<wbr>very-long-domain.<wbr>io</wbr></wbr>
Flex 布局下 label 折行居中的常见翻车点
当 label 被包在 display: flex 容器里（如表单行），直接加 text-align: center 会失效——因为 flex 子项默认是「单行弹性盒子」，text-align 不起作用。
- 正确做法：给
label加flex: 1或固定width，再配合text-align: center和white-space: normal - 漏掉
white-space: normal是高频错误，尤其当父级或全局样式设了white-space: nowrap（常见于按钮、导航栏） - 避免用
align-items: center试图“垂直居中文字”，它只对整个label元素生效，不影响内部多行文本的基线对齐
真正需要警惕的兼容性陷阱
IE11 对 overflow-wrap 支持不全，必须加前缀 -ms-word-break；而 Safari 旧版本对 <wbr></wbr> 的响应较弱，依赖 overflow-wrap 更稳。
立即学习“前端免费学习笔记（深入）”；
- 兼容写法：
word-wrap: break-word; /* IE -
<wbr></wbr>在纯数字串（如1234567890）或普通英文单词中间（如hel<wbr>lo</wbr>）基本无效，别白费劲 - 移动端缩放时，
max-width值若用px单位可能被忽略，建议搭配vw或用flex-basis替代
