text-align: center仅对行内内容有效，不居中块级元素自身；margin: 0 auto需块级+定宽+在普通流中；flex的justify-content: center最省心但改变父容器布局；absolute+transform适合脱离文档流元素。
没有“七种方法都通用”的说法，只有哪一种在当前结构下不破坏布局、不引入副作用、且浏览器能按预期渲染——选错方案比没写样式还危险。
text-align: center 只对行内内容起作用
这是最常被误用的方案。它不移动元素本身，只控制块级父容器内部的行内级内容（<span>、<a>、<img>、文本）的对齐方式。
- 常见错误现象：
<div>加了text-align: center却完全不动——因为它不是行内内容，而是块级元素自身 - 适用场景：让段落文字居中、让一组图标或链接水平排列居中
- 注意：
display: flex或display: grid父容器会忽略这个声明；子元素若用了float或position: absolute，也失效
margin: 0 auto 要求块级 + 定宽 + 在普通流中
这是唯一真正“居中元素自身”的传统方案，但限制明确。
- 必须同时满足三个条件：元素是
display: block（或table等可设宽的块格式上下文）、有明确width（不能是100%或auto）、未脱离文档流（即不能有float、position: absolute） - 常见错误：给
<img>直接写margin: 0 auto无效——得先加display: block - 兼容性极好，但父容器若是
flex或grid，该声明会被完全忽略
flex 布局的 justify-content: center 最省心但有隐性代价
只要父容器设display: flex和justify-content: center，子元素立刻水平居中，无论它是<div>、<img>还是<button>。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 优点：不依赖子元素宽度，响应式友好，垂直+水平居中只需再加
align-items: center - 副作用明显：父容器变成 Flex 容器后，所有直系子元素自动成为 Flex 项目，
float、vertical-align、甚至部分margin行为都会失效 - IE10–11 对
justify-content支持有 bug，老项目慎用；IE9 及以下完全不支持
position: absolute + transform: translateX(-50%) 专治脱离文档流
当元素已经用了position: absolute或fixed，又必须精确居中时，这是目前最可靠的方式。
- 必须配套：父容器设
position: relative（或其他非static定位），否则left: 50%会相对于视口计算 - 关键在
transform: translateX(-50%)——它把元素向左平移自身宽度一半，不依赖具体像素值，比margin-left: -100px安全得多 - 常见错误：只写
left: 50%，结果元素左边缘在中心，右半边跑出屏幕；或者忘了加position: relative到父容器 - IE9+ 支持，但旧版 Safari 需要
-webkit-transform前缀
真正容易被忽略的点是：居中从来不是“写个样式就完事”，而是先判断元素是否还在文档流里、有没有固定尺寸、父容器是否已被其他布局方式接管——这几个条件一变，刚才还有效的方案可能立刻失效。
