图片水平垂直居中需分情况：水平居中用text-align:center（父元素）或margin:0 auto（块级+定宽）；垂直居中需父容器有明确高度，推荐flex布局（display:flex;justify-content:center;align-items:center）或绝对定位加transform。
图片在网页中间位置，不是加个 align="center" 就行——这个属性早被废弃，现代浏览器基本忽略。真正起作用的只有 CSS，且必须分清“水平居中”和“水平+垂直居中”是两回事。
text-align: center 只管水平，且只对父容器生效
这是最轻量、兼容性最好的水平居中方式，但极易用错。
- 必须写在
<div>或<p>这类父容器上，写在<img>标签里完全无效 - 适用于
<img>作为行内元素的场景（默认就是），不需要改display - 父容器要有明确宽度（比如
width: 100%或固定值），否则可能无效果 - 不解决垂直方向问题；如果父容器高度很小，图片会贴顶显示
示例：<div style="text-align: center;"><img src="logo.png"></div>
margin: 0 auto 要求块级 + 定宽 + 非 flex 父容器
这是让图片“作为独立块”来居中的方式，语义更清晰，但三个条件缺一不可。
立即学习“前端免费学习笔记（深入）”；
- 必须设
display: block，否则margin: 0 auto对行内元素不起作用 - 必须有明确宽度（
width: 300px或max-width: 100%），不能是width: auto - 父容器不能是
display: flex或display: grid，否则会覆盖margin: auto的行为 - 依然只控制水平方向；垂直方向需额外处理（比如用
flex包一层）
示例：<img src="photo.jpg" style="display: block; width: 400px; margin: 0 auto;">
flex 布局实现水平+垂直居中，但父容器高度不能丢
这是现代项目中最推荐的一体化方案，但很多人卡在“图片看不见”上——其实只是父容器塌缩了。
- 必须作用在父容器上：
display: flex; justify-content: center; align-items: center -
align-items: center依赖父容器有可用高度，所以一定要加height: 100vh或min-height: 300px等 - 别直接在
<body>上设display: flex，它会让所有直系子元素（如多个<div>）变成 flex item，破坏原有结构 - 图片自身无需任何样式，
inline或block都不影响
示例：<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"><img src="icon.png"></div>
position: absolute + transform 是唯一不依赖尺寸的真居中
当图片宽高未知、或需要脱离文档流（比如加载遮罩、弹窗图标），这个组合最可靠。
- 父容器必须设
position: relative，否则absolute会相对视口定位，一缩放就偏 -
top: 50%; left: 50%把左上角拉到中心，再用transform: translate(-50%, -50%)回拉自身尺寸一半 - 不依赖图片是否设置了
width或height，响应式友好 - 如果父容器没设宽高，图片可能溢出或定位不准，尤其在
min-height: auto场景下要格外注意
示例：<div style="position: relative; height: 400px;"><img src="logo.png" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
最容易被忽略的是：垂直居中永远需要一个“参照高度”。无论是 flex 的 align-items，还是 absolute 的 top: 50%，都依赖父容器有可计算的高度。没有高度，就没有“中”。
