给 details 元素直接设置 text-align: center 无效，因为 summary 默认为 display: list-item 且不继承父级 text-align；正确做法是为 summary 单独设置 text-align: center 和 display: block，并清除默认 padding 以确保居中精准。
直接给 details 元素加 text-align: center 不起作用——因为 details 默认是块级元素，但它的内容（尤其是 summary）有默认的用户代理样式，会覆盖或干扰居中逻辑。
为什么 text-align: center 加在 details 上无效
浏览器对 summary 有内置样式（如 Chrome 中 summary 是 display: list-item），它不继承父级的 text-align；同时 details 自身没有强制包裹文本的“容器语义”，文字实际渲染在 summary 内部，而非 details 直接子节点。
-
details上设text-align: center→ 对summary无影响（不继承） -
summary是行内级（display: list-item），不能直接设margin: 0 auto - 若用
flex，需注意summary的伪元素（如三角符号）可能参与布局
正确做法：给 summary 单独设置居中
最稳定、兼容性好（IE11+、所有现代浏览器）的方式，是显式选中 summary 并应用水平居中样式：
details summary {
text-align: center;
display: block; /* 覆盖部分浏览器的 list-item，默认支持 text-align */
}
- 必须写
display: block：Firefox 和 Safari 某些版本下summary默认为list-item，而list-item对text-align的响应不一致 - 不需要改
details的样式，避免干扰展开/折叠行为 - 如果
summary里有图标或自定义箭头，建议用::marker控制，不要依赖内联 HTML
需要垂直居中？别碰 line-height，用 flex
单行 summary 垂直居中容易出错——line-height 高度难控，且多行时失效。稳妥方案是让 summary 成为 flex 容器：
立即学习“前端免费学习笔记（深入）”；
details summary {
display: flex;
justify-content: center;
align-items: center;
height: 40px; /* 需显式设高度，否则 align-items 无效 */
padding: 0;
}
-
height必须设置，否则align-items: center没有参考基准 - 移除默认
padding（各浏览器不同，Chrome 是 12px 左右），否则影响居中精度 - 该写法在 Safari 15.4+、Chrome 90+、Firefox 89+ 均表现一致；IE 不支持
details，无需考虑
细节陷阱：展开后的内容（<details>...</details> 内非 summary 部分）
很多人想连同 details 展开后的正文也一起居中——但这是两个独立区域：summary 是标题栏，其余子节点是普通流内容。正文居中要单独处理：
details > *:not(summary) {
text-align: center;
}
- 用
:not(summary)精准排除标题，避免误选嵌套的details - 如果正文含块级元素（如
p、div），它们仍需自身设text-align: center或用 flex，仅靠父级text-align不够可靠 - 注意：该选择器在 IE 中不支持，但 IE 本就不支持
details，可放心使用
真正麻烦的不是怎么写，而是忘记 summary 有浏览器默认 display 和 padding；不重置这两项，任何居中都会偏移几像素。动手前先用 DevTools 检查 computed styles。
