margin: 0 auto仅对定宽块级元素有效；非定宽时因无剩余空间可分，auto退化为0，故无法居中。
非定宽元素无法用 margin: 0 auto 居中——这是最常踩的坑。它不是“写错了”，而是根本不符合该声明的生效条件。
为什么 margin: 0 auto 对非定宽块级元素无效
margin: 0 auto 的居中逻辑依赖浏览器计算左右外边距的“剩余空间”。如果元素没有显式 width（或 max-width），它的宽度默认由内容撑开，等于父容器可用宽度（即 100%），此时左右无剩余空间可分，auto 就退化为 0。
- 常见错误现象：
<div>文字</div>加了margin: 0 auto却完全不动 - 即使设了
display: block，只要没width，照样不生效 -
width: fit-content或width: max-content是可行替代，但兼容性需注意（IE 不支持）
用 text-align: center 居中 inline-level 元素
对图片、按钮、链接、<span> 等天然 inline 元素，或显式设了 display: inline/inline-block 的元素，直接在父容器上设 text-align: center 最轻量、兼容性最好。
- 只作用于 inline-level 子元素，对
display: block子元素无效 - 父容器不能有
float或position: absolute，否则text-align可能被忽略 -
inline-block元素要注意 HTML 换行产生的空白字符，会导致轻微偏移；可用font-size: 0或注释删空格解决
用 Flex 布局居中任意尺寸元素
现代项目首选方案：父容器设 display: flex + justify-content: center，无需关心子元素是否定宽、是否 inline/block、是否脱离文档流。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 水平居中只需
justify-content: center；加align-items: center可同时垂直居中 - 子元素若本身是
display: block，无需额外设width，也不受float影响 - 注意：父容器高度未设置时，
align-items: center垂直居中可能不明显（因父容器高度塌陷） - IE10+ 支持，但旧版 IE 需加
-ms-前缀（如display: -ms-flexbox）
用绝对定位 + transform 居中未知尺寸元素
适合模态框、提示层等脱离文档流、尺寸不可预知的场景。核心是先定位到父容器中心点，再反向平移自身一半尺寸。
- 父容器需设
position: relative（或absolute/fixed） - 子元素设
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) -
transform比负margin更安全：无需知道具体宽高，且不会因缩放/字体变化失效 - 慎用于动画场景：频繁触发
transform可能影响性能，建议搭配will-change: transform
真正难的不是“怎么居中”，而是判断元素类型、流动状态和父容器约束——比如一个 display: inline-block 的卡片，在 flex 父容器里用 justify-content 居中没问题，但在普通块级父容器里就得靠 text-align；而一旦它被 position: absolute，前面两种都失效，只剩 transform 路径。
