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 行为，再靠块级容器机制居中：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 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>，再对这个 <code>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，都可能让屏幕阅读器跳过整个分组。