text-align: center仅对父元素生效且要求img为inline；margin: 0 auto需display: block+明确width；flex需父容器有高度并同时设justify-content和align-items；place-items: center是grid简写，兼容性差但简洁。
text-align: center 只对父容器生效，且仅影响行内图片
这个方法最轻量，但很多人加错位置——text-align: center必须写在包裹<img>的父元素上，比如<div>或<p>，不能写在<img>自己身上。
它只管水平方向，且依赖<img>保持默认的display: inline状态。一旦你给图片加了display: block或float，它就失效。
- 适用场景：图文混排段落、卡片里单张配图、简单 banner
- 常见翻车点：
<div>被设成display: inline-block或float，导致宽度不明确，居中偏移 - 父容器里如果混了
<div>这类块级子元素，它们不会响应text-align，依然靠左
示例：<div style="text-align: center"><img src="logo.png"></div>
margin: 0 auto 要求 display: block + 明确 width
这是让图片“作为块”来居中的方式，只控制水平方向，垂直方向完全不管。它的本质是让浏览器把左右 margin 平分剩余空间，所以必须有“剩余空间”可分。
立即学习“前端免费学习笔记（深入）”；
三个条件缺一不可：display: block（或inline-block），width（固定值或max-width配合height: auto），父容器不能是display: flex或display: grid（否则会接管 margin 行为）。
- 常见错误现象：写了
margin: 0 auto但没反应 → 检查是否漏了display: block，或图片用了position: absolute、float - 响应式场景下，用
max-width: 100%时，记得同步设height: auto防止拉伸 - 兼容性好，IE8+ 都支持
示例：<img src="icon.svg" style="display: block; width: 64px; margin: 0 auto;">
flex 布局实现水平+垂直居中，父容器高度不能塌
这是现代项目中最可控的双向居中方案，但也是最容易只写一半就以为搞定的地方。justify-content: center和align-items: center必须同时存在，且都作用在父容器上。
关键限制：父容器必须有明确高度参照，比如min-height: 300px、height: 100vh；否则align-items: center无空间可居中，图片只会水平居中、垂直贴顶。
- 别直接在
<body>上加display: flex→ 它会让所有直系子元素变成 flex item，破坏原有结构 - 旧 Android（4.4 及以下）需加
-webkit-前缀，如display: -webkit-flex - 如果图片加了
position: absolute或float，已脱离文档流，flex 对齐规则直接失效
示例：<div style="display: flex; justify-content: center; align-items: center; min-height: 300px;"><img src="photo.jpg"></div>
place-items: center 是 grid 下最简视口居中方案
place-items: center是 CSS Grid 的简写，等价于justify-items: center; align-items: center，一行代码搞定双向居中，但前提是父容器启用display: grid。
它不要求子元素显式设宽高，也不依赖父容器有固定高度（只要 grid 容器自身有尺寸即可），比 flex 更简洁。但不兼容 IE，老项目慎用。
- 父容器设
display: grid; place-items: center;即可，无需额外 height - 如果父容器本身是
display: flex或display: inline-block，会覆盖 grid 行为 - 适合现代项目中需要快速居中图标、弹窗、登录框等固定尺寸或响应式内容
示例：<div style="display: grid; place-items: center; min-height: 100vh;"><img src="logo.svg"></div>
真正容易被忽略的是上下文：图片是否还在文档流里、父容器是否被其他样式悄悄改了 display 或 float、以及高度是否真的存在——这些细节比写哪一行代码更决定成败。
