legend居中不能用text-align:center，因其默认为inline元素，该属性仅对内部文字生效，不改变其在fieldset边框中的锚点位置；正确做法是设display:block后用margin:0 auto实现整体居中，避免width/max-width引发firefox换行错位，禁用时需显式设置fieldset[disabled] legend{color:#999}。

legend 居中为什么不能用 text-align: center

text-align: center 对 legend 无效，因为它默认是 inline 元素，该属性只控制内部文字对齐，不改变其在 fieldset 上边框中的锚点位置。结果常是文字“看起来居中”，但整个标题仍卡在左上角，和输入框重叠或错位。

让 legend 整体居中最稳的写法

必须先设 display: block，再靠 margin 触发自动居中：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

legend {
  display: block;
  margin: 0 auto;
}

• 不要加 width 或 max-width，Firefox 下容易强制换行、错位
• 避免 text-align: center，它在这里多余且不可靠
• 如果 fieldset 清过 padding，记得补 padding-top 防止内容顶到标题下方

用 flex 实现 legend 居中要绕开哪些坑

给 fieldset 加 display: flex 会直接破坏 legend 的原生嵌入机制——它会退化成普通子元素，可能被边框裁剪、卡在左上角、甚至消失。

• 安全做法：把 legend 包进一个 <div>，再对这个 <code>div 设 margin: 0 auto 或 align-self: center
• 更轻量的替代：legend { display: inline-flex; align-items: center; justify-content: center; }
• 绝对不要用 position: absolute，它会让屏幕阅读器丢失语义关联

禁用 fieldset 后 legend 颜色没变怎么办

fieldset[disabled] 不影响 legend 样式，这是规范行为，不是 bug。只设 fieldset[disabled] { opacity: 0.5; } 会导致视觉降级但控件仍可交互。

• 显式控制颜色：fieldset[disabled] legend { color: #999; }
• 别依赖全局 opacity，它不阻断键盘焦点，也不影响表单提交逻辑
• input[type="hidden"] 不受 fieldset[disabled] 影响，这点常被忽略
的原生定位逻辑比表面看起来更脆弱。哪怕多一个空格、少一个换行、或加一行 display: contents，都可能让屏幕阅读器跳过整个分组。真正难的不是“怎么让它居中”，而是“怎么居中还不破坏语义链”。