折叠面板标题文字居中应使用text-align: center作用于父容器（如<details>），而非<summary>自身；混入图标时需加vertical-align: middle统一基线；整体标题块居中可用width: fit-content + margin: 0 auto；切忌破坏语义与可访问性。
折叠面板标题文字居中用 text-align: center
折叠面板（比如 <details><summary> 或第三方组件如 Bootstrap Accordion）的标题区域本质是行内级容器，里面放的通常是文字、图标或简单标签。想让标题内容水平居中，最直接有效的方式就是在 <summary> 或其父容器上加 text-align: center。
常见错误是试图给 <summary> 自身设 margin: 0 auto —— 它默认是 display: list-item（不是块级），margin: auto 不生效；或者套个 div 再 flex 居中，反而破坏语义和可访问性。
-
<summary>是行内级元素，text-align必须作用在其**父容器**（即<details>）上才可靠 - 如果用了自定义组件（如 Vue 的
<el-collapse-item>），检查文档是否封装了header插槽，此时应把text-align: center加在插槽外层容器上 - 避免在
<summary>里强行加display: block+width: 100%—— 这会让点击热区变窄，影响可访问性
<summary> 里有图标或按钮时怎么居中
当标题里混入 <img>、<svg> 或 <button> 等替换元素时，text-align: center 仍能居中文本，但图标可能因基线对齐（baseline）偏移。这时需统一垂直对齐方式：
- 给所有内联子元素加
vertical-align: middle（不是top或bottom） - 如果用了 Flex 布局（例如给
<summary>设display: flex），必须同时设justify-content: center和align-items: center，否则图标会贴顶 - 慎用
line-height拉高居中：它只对纯文本稳定，遇到图标容易错位，且响应式下难维护
折叠面板整体标题块居中（非仅文字）
有时你真正想居中的不是“标题里的字”，而是整个 <summary> 所占的那一条横条（比如宽度不满屏，想让它在父容器里水平居中）。这时候要区分场景：
立即学习“前端免费学习笔记（深入）”；
- 若父容器是普通块（
display: block），给<details>加width: fit-content+margin: 0 auto即可 —— 注意不能省略width，否则auto无效 - 若父容器已是
display: flex，别再给<details>加margin: auto，直接靠父容器的justify-content: center控制 - 绝对定位方案（
position: absolute+transform: translate(-50%, -50%)）在这里极不推荐：折叠面板需要交互（点击展开/收起），脱离文档流后焦点管理、键盘导航、屏幕阅读器支持都会出问题
兼容性和可访问性陷阱
折叠面板标题居中看似简单，但实际最容易被忽略的是可访问性退化：
- 用
flex或grid强行包裹<summary>可能导致role="button"语义丢失，屏幕阅读器读不出“可点击”状态 -
text-align: center在 IE11 下对<summary>生效不稳定，稳妥做法是外层包一层<div>并设该div的text-align - 移动端点击区域过小：居中后若没留足 padding，手指点不准。务必给
<summary>设padding: 12px 16px以上，且不要用min-width限制太死
最后提醒一句：居中只是视觉调整，别为了居中牺牲语义结构或交互逻辑。折叠面板的核心是「可展开」，标题对齐只是表层，别让它掩盖了可访问性这个底座。
