legend居中必须设display:block再用margin:0 auto实现整体居中，text-align:center仅对文字生效且不改变锚点位置；禁用width/max-width以防firefox换行错位，需补padding-top避免内容顶标题。
legend 居中但不破坏边框嵌入效果
直接写 text-align: center 对 legend 无效——它默认是 inline 元素，该样式只对内部文字起作用，标题整体仍锚定在 fieldset 左上角，容易和输入框重叠或被边框裁剪。
真正生效的居中方式是让它“整体居中”，而不是“文字居中”：
- 必须先设
display: block，否则margin: 0 auto不触发居中逻辑 - 用
margin: 0 auto而不是margin-left: auto; margin-right: auto，更简洁且兼容性一致 - 绝对不要加
width或max-width，Firefox 下会强制换行、错位甚至把标题挤到第二行 - 如果清掉了
fieldset的默认padding，记得补padding-top: 0.75em，否则内容会顶到标题下方
两端横线 + 中间文字的标准实现
利用 fieldset 原生边框是最轻量、语义最干净的方式，不用额外 DOM 元素：
-
fieldset设border: none清掉四边，再用border-top: 1px solid #ccc单独画上线 -
legend设background: white（或父容器背景色），覆盖掉顶部横线，形成“挖空”效果 -
legend加padding: 0 12px避免文字贴边，也防止背景色过宽导致横线断开 - 整个
fieldset宽度建议用width: fit-content或固定值，避免横线无限延伸
示例 CSS：
fieldset {
border: none;
border-top: 1px solid #ccc;
text-align: center;
width: fit-content;
margin: 1.5em auto;
}
legend {
display: block;
margin: 0 auto;
padding: 0 12px;
background: white;
font-size: 1rem;
}
加图标时怎么避免错位和可访问性丢失
legend 里硬塞 <i></i> 或 <img> 极易错位、换行、被截断，还可能干扰屏幕阅读器读取顺序。
安全做法是用伪元素：
-
legend设position: relative - 用
::before绝对定位图标，left: -1.5em或right: -1.5em微调位置 - 图标用
background-image或 SVG data URL，避免额外请求 - 务必加
aria-hidden="true"到伪元素容器（如包裹图标的<span></span>），防止重复朗读
别用 position: absolute 直接定位 legend 本身——它会脱离语义流，屏幕阅读器无法关联控件组。
禁用状态下的 legend 颜色与交互一致性
fieldset[disabled] 不会影响 legend 样式，这是规范行为，不是 bug。只设 opacity: 0.5 看似省事，但会导致：
- 键盘焦点仍可进入子控件（尤其在 IE/旧 Safari 中）
- 表单提交逻辑不受控（
input[type="hidden"]不受disabled影响） - 颜色变灰但文字对比度不足，不符合 WCAG 1.4.3
正确做法是显式控制：
fieldset[disabled] legend { color: #999; }-
fieldset[disabled] { pointer-events: none; }（增强禁用感，但需测试 Safari 兼容性） - 配合
cursor: not-allowed提供视觉反馈
真正难的不是让线和字对齐，而是对齐之后，屏幕阅读器还能准确说出“这个标题管着下面三个输入框”。哪怕多一个空格、少一行 margin-block-start，都可能切断语义链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
