legend 居中需用 display: block 和 margin: 0 auto，因 text-align 只影响内部文字对齐而不改变其在 fieldset 上边框的定位锚点，且块级布局才能确保跨浏览器兼容与语义完整。
legend 在 fieldset 上边框居中，不能靠 text-align: center —— 它只对内部文字生效，不移动整个标题的锚点位置。真正起效的是块级布局 + 自动外边距。
为什么 text-align: center 对 legend 无效
legend 默认是 inline 元素，text-align 只控制其内联内容（比如文字）的水平对齐，但不会改变它在 fieldset 上边框中的定位起点。结果常是文字“看着居中”，而标题整体仍卡在左上角，和第一个 input 重叠或错位。
- Chrome 和 Firefox 渲染逻辑不同：Chrome 用背景色覆盖边框，Firefox 用透明挖空，
text-align不参与这个机制 - 设了
background-color后若没加padding，文字容易贴边难读 - 加
width或max-width会触发 Firefox 换行，导致标题断开、错位
legend { display: block; margin: 0 auto; } 是最稳写法
这是跨浏览器兼容性最好的居中方案，直接让 legend 成为块级元素，再靠 margin 触发自动居中。
- 必须写
display: block，别用inline-block或flex—— Safari 旧版可能忽略样式变更 -
margin: 0 auto要搭配无宽度限制（即不设width/max-width），否则 Firefox 易换行 - 如果
fieldset清掉了默认padding，记得补padding-top: 0.75em，否则内容会顶到标题下方 - 避免
position: absolute—— 语义断裂，屏幕阅读器无法关联legend和控件组
右对齐或左对齐怎么写
想右对齐整个 legend，不是只右对齐文字，得靠块级流式布局：
- 右对齐：
legend { display: block; margin-left: auto; } - 左对齐（带缩进）：
legend { display: block; margin-left: 1rem; }，别用padding-left，它会影响锚点位置 - 用
float: right虽然能实现右对齐，但会脱离文档流，后续子元素排版易乱，不推荐 - 不要给
fieldset设display: flex或display: grid——legend会退化成普通子元素，边框挖空失效，甚至被裁剪
禁用状态下的 legend 颜色怎么改
fieldset[disabled] 不影响 legend 样式，这是规范行为，不是 bug。全局设 opacity 或 pointer-events: none 都不解决颜色问题。
- 显式写：
fieldset[disabled] legend { color: #999; } -
input[type="hidden"]不受fieldset[disabled]影响，这点常被忽略 - 别依赖
fieldset[disabled] { opacity: 0.5; }—— 键盘焦点仍在，表单仍可提交
真正难的不是让 legend 居中，而是居中后不破坏它和 fieldset 的语义绑定。多一个空格、少一个换行、或加一行 display: contents，都可能导致屏幕阅读器跳过整个分组。语义链比视觉效果更脆弱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
