text-align: center 必须作用于父容器，仅水平居中行内子元素；margin: 0 auto 需 block + 明确 width；flex 需 justify-content 和 align-items 同时设置且父容器有高度；place-items: center 是 grid 下最简视口居中方案。
text-align: center 只对父容器生效，且只管水平方向
这是最轻量、兼容性最好的水平居中方式，但很多人写错位置——text-align: center 必须加在父容器（比如 <div> 或 <code><p></p>）上，不是 <img> 自己。因为 text-align 是容器属性，作用对象是它的行内子内容，而 <img> 默认就是 inline 元素。
常见翻车点：
- 给
<img>加style="max-width:90%"→ 完全无效 - 父容器用了
float、display: inline-block或被其他样式撑窄 → 宽度不明确，居中偏移 - 父容器里混了
<div> 这类块级子元素 → 它们不受 <code>text-align影响，依然靠左适用场景：图文混排的段落、卡片里单张配图、简单 banner。示例：
<div style="text-align: center"><img src="logo.png"></div>margin: 0 auto 要求 display: block + 明确 width
这个组合专治“图片独占一行还想水平居中”的需求，但任意条件缺失都会失效。它不是“让图片居中”，而是让浏览器把左右 margin 平分剩余空间——所以必须有“剩余空间”可分。
三个硬性条件缺一不可：
-
display: block（或inline-block），否则margin: 0 auto对inline元素无效 - 图片要有可计算的宽度：显式设
width: 200px，或依赖固有尺寸；width: 100%或max-width: 100%会让auto失效 - 父容器不能是
display: flex或display: grid，否则会接管 margin 行为
示例：
<img src="icon.svg" style="max-width:90%">。注意：它完全不管垂直方向，图片仍贴顶。flex 布局实现水平+垂直居中，父容器高度不能塌
这是现代项目中最可控的双向居中方案，但也是最容易只写一半就以为搞定的地方。
justify-content: center和align-items: center必须同时存在，且都作用在父容器上。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
关键限制：
- 父容器必须有明确高度参照，比如
height: 100vh、min-height: 300px；否则align-items: center没空间可居中，图片只会水平居中、垂直贴顶 - 别直接在
上加display: flex→ 它会让所有直系子元素（如多个<p></p>）变成 flex item，破坏原有结构 - 旧 Android（4.4 及以下）需加
-webkit-前缀，如display: -webkit-flex
示例：
<div style="display: flex; justify-content: center; align-items: center; min-height: 300px;"><img src="photo.jpg"></div>place-items: center 是视口级居中最简解，但不兼容 IE
如果目标是让图片真正落在屏幕正中央（即视口中心），
place-items: center配合height: 100vh是目前代码最少、语义最清的方案。它本质是把父容器当单格网格，子元素自动居中，不依赖图片尺寸。注意事项：
- 必须设
height: 100vh（或具体高度），否则“垂直”无参照 -
place-items: center等价于justify-content: center+align-items: center，但仅限 Grid 容器 - IE 完全不支持，若项目需兼容 IE，跳过此方案，改用 flex
示例：
<div style="display: grid; place-items: center; height: 100vh;"><img src="logo.png"></div>。真正麻烦的从来不是写哪行 CSS，而是判断父容器有没有高度、是不是 flex 上下文、图片到底算 inline 还是 block —— 这些细节漏掉一个，居中就失效。 -
