legend文字居中需用display: block加margin: 0 auto，因text-align对inline元素仅作用于内部文本；禁用position: absolute和align属性，避免破坏可访问性。
直接改 text-align 不行，它只影响 legend 内部文字对齐，不移动整个标题位置；真正起作用的是 display + margin 或 inline-flex。
legend 文字居中为什么 text-align: center 没用
因为 legend 默认是 inline 元素，text-align 只控制其内部文本的水平对齐，不改变它在 fieldset 上边框中的锚点位置。结果常是文字“看起来居中”，但标题整体仍卡在左上角，和输入框重叠或错位。
- 别写
legend { text-align: center; }—— 它在这里无效且误导 - Firefox 下加了
max-width还容易强制换行、错位 - 如果
fieldset清过padding，记得补padding-top，否则内容会顶到标题下方
让 legend 整体居中：最稳的写法
必须先脱离 inline 行为，再靠块级容器机制居中：
-
legend { display: block; margin: 0 auto; }—— 简洁可靠，所有现代浏览器都支持 - 避免加
width或max-width，尤其 Firefox 对它的处理不稳定 - 如果用了
border-radius，同步加overflow: hidden，否则legend可能溢出圆角外
右对齐 legend 的安全方案
不能用已废弃的 align="right"，也不能给 fieldset 设 display: flex（会破坏 legend 嵌入机制）：
立即学习“前端免费学习笔记（深入）”；
- 推荐：
legend { display: block; margin-left: auto; } - 轻量替代：
legend { display: inline-flex; justify-content: flex-end; align-items: center; } - 绝对不要用
position: absolute—— 它会让屏幕阅读器丢失语义关联 - 更稳妥的包裹法：把
legend包进一个<div>，再对这个div设margin-left: auto
禁用 fieldset 后 legend 颜色没变怎么办
fieldset[disabled] 不会影响 legend 样式，这是规范行为，不是 bug：
- 显式写：
fieldset[disabled] legend { color: #999; } - 别依赖
fieldset[disabled] { opacity: 0.5; }—— 它不阻断键盘焦点，也不禁用提交逻辑 -
input[type="hidden"]不受fieldset[disabled]影响，这点常被忽略
真正难的不是“怎么排齐文字”，而是“怎么排齐还不破坏可访问性”。哪怕只是多一个 display: contents，都可能让屏幕阅读器跳过整个分组。
