text-align: center仅对父容器内行内内容（如文字、img）水平居中有效，对块级元素自身无效；真要双向居中需用flex或grid布局。
直接用 text-align: center 在父容器上最省事，但只解决水平居中；真要“不同分辨率下稳稳居中”，必须分清场景——是仅水平居中，还是需要上下左右都精准落位。
父容器用 text-align: center 就够了？
对纯水平居中来说，是的，而且兼容性最好。但前提是：img 保持默认 inline 行为，且父容器没被 float、display: flex 或宽度塌陷干扰。
-
text-align: center必须写在父<div>上，写在<img>标签里完全无效 - 父容器建议不设固定宽，或显式加
width: 100%，否则在某些 CMS（如 Zakra）里可能因区块包裹逻辑失效 - 图片自身必须加
max-width: 100%和height: auto，否则窄屏会溢出、宽屏会拉伸 - 如果父容器用了
font-size: 0（常见于清除 inline 间隙），记得给img单独设font-size: initial，否则图片可能消失
为什么 margin: 0 auto 经常不生效
它不是“不工作”，而是被三个硬条件卡住：图片没变块级、浏览器算不出剩余空间、父容器已接管布局逻辑。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须配
display: block，否则margin: 0 auto对行内元素完全无效 -
max-width: 100%不提供可计算宽度，浏览器无法分配“自动外边距”——所以单独写margin: 0 auto; max-width: 100%仍靠左 - 父容器若为
display: flex或display: grid，margin行为被覆盖，此时该用justify-content - WordPress 或古腾堡区块里，
<p>包裹的图片默认有display: inline，直接加margin无效，得先改父容器或抽离成独立<div>
要真正响应式双向居中（水平 + 垂直）
必须用 display: flex 或 display: grid，但高度控制是关键——没有明确高度参照，align-items: center 或 place-items: center 就等于在零空间里居中。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
min-height: 100vh（比height: 100vh更安全，避免内容超长时滚动条卡位） -
display: flex; justify-content: center; align-items: center三者缺一不可，只写前两个，垂直方向照样贴顶 - 图片仍要加
max-width: 90vw和height: auto，防止大图撑满全屏不留白 - 若用
display: grid; place-items: center，语义更简洁，但 IE 完全不支持，旧 Safari（
最容易被忽略的是：居中只是表象，真正决定成败的是容器高度是否可控、图片尺寸是否被约束、以及父容器的 display 类型是否和所选对齐方式匹配。写错一层，整个居中链就断了。
