text-align: center只对父容器内的行内内容（如文本、、）生效，不触发重排，纯渲染层调整；给块级元素加该样式不会使其自身居中，仅影响其内部行内内容的水平对齐。
text-align: center 只对行内内容生效，不触发重排
这个声明只作用于父容器的行内级子元素（<span></span>、<img>、文本节点），浏览器不会重新计算布局流，纯渲染层调整，性能开销几乎为零。
常见错误是给 <div> 加 <code>text-align: center 还指望它自己居中——它只是让内部文字居中，自身位置完全不变。
- 适用场景：标题文字、按钮组、图标列表等行内/行内块内容
- 兼容性：IE6+ 全支持，无前缀需求
- 副作用：在
display: flex或display: grid父容器里会被忽略
margin: 0 auto 要求定宽+普通流，重排成本低但条件苛刻
margin: 0 auto 是唯一真正“移动块级元素自身”的传统方案，浏览器只需一次 layout 计算左右 margin 值，不改变文档流结构，性能很好。
但它失败率高：只要子元素是 float、position: absolute、display: inline-block（没设宽）或父容器是 flex，就彻底失效。
- 必须同时满足：块级显示 + 显式
width（不能是100%或auto）+ 未脱离文档流 -
<img>默认是inline，得先加display: block才能用 - IE6–8 支持完好，现代浏览器也无兼容问题
flex 的 justify-content: center 改变父容器布局模型
启用 display: flex 会让父容器从普通文档流切换为 Flex 格式上下文，所有直系子元素变成 Flex 项目——这会触发完整重排，且影响后续所有子元素的盒模型行为。
不是“加个居中样式”那么简单：它禁用 float、重定义 vertical-align、修改 margin 合并规则，甚至影响可访问性语义（如屏幕阅读器读取顺序）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 优势：响应式友好，不依赖子元素尺寸，
justify-content+align-items一键双居中 - IE10–11 对
justify-content有渲染 bug（比如内容偏右），需测试验证 - 如果父容器本身已是
grid或已有复杂浮动结构，强行加flex很可能破坏原有布局
absolute + transform: translateX(-50%) 脱离文档流但定位精准
该组合不改变父容器布局模型，只对目标元素做合成层变换（GPU 加速），重排开销最小，但元素脱离文档流后可能影响后续元素位置和高度计算。
关键点在于 transform 是独立图层操作，比 left: calc(50% - 宽度/2) 更安全——后者需要 JS 或 CSS 预计算宽度，且宽度变化时要重新解析。
- 必须配套：
position: relative在父容器上，否则left: 50%会相对于视口定位 - 只写
left: 50%不加transform，结果是左边缘居中，右边溢出 - IE9+ 支持，旧版 Safari 需加
-webkit-transform前缀
Grid 的 place-items: center 性能好但兼容门槛高
display: grid + place-items: center 是目前最简洁的二维居中写法，浏览器内部优化成熟，重排效率接近 flex，但启用 grid 同样会重置父容器布局上下文。
它比 flex 更少受子元素 display 类型干扰（place-items 对 inline、block、absolute 都有效），但老浏览器支持差，且 grid 容器的隐式轨道生成逻辑容易意外撑高父容器。
- Firefox/Chrome/Safari 16+ 原生支持，无需前缀
- IE 完全不支持，Android WebView 4.4–6.0 有严重 bug
- 如果父容器高度由内容撑开，
place-items可能导致高度塌陷，需显式设min-height
实际选型时，别只看“哪个最快”，先盯住三点：元素是否脱离文档流、父容器当前布局类型、是否要兼顾 IE 或低端 WebView。多数情况下，text-align 和 margin: 0 auto 仍是零成本首选；真要动布局模型，就接受它带来的连锁反应。
