Flex布局是目前最可靠、语义清晰且响应式友好的图片水平垂直居中方案，需父容器设display: flex、justify-content: center和align-items: center，并确保有明确高度。
用 Flex 布局实现图片水平垂直居中
这是目前最可靠、语义清晰且响应式友好的方式。只要父容器有明确高度（比如 height: 100vh 或固定值），就能稳定生效。
常见错误现象：图片没居中，或只水平居中但不垂直——大概率是父容器没设 height，或者忘了加 align-items: center。
-
display: flex必须写在父容器上，不是<img>上 -
justify-content: center控制水平，align-items: center控制垂直，两个缺一不可 - 图片本身建议加
max-width: 100%和height: auto，防止溢出或拉伸 - 如果父容器高度依赖内容（比如
height: auto），垂直居中会失效——此时需换其他方案
用 Grid 布局一行搞定居中
place-items: center 是 Grid 的语法糖，等价于同时设置 justify-items: center 和 align-items: center，代码更短，但兼容性略低于 Flex（IE 不支持）。
使用场景：你已经用 Grid 做整体布局，顺手把图片居中；或者项目不需要兼容 IE11 及更早版本。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: grid，否则place-items无效 - 同样需要容器有高度（
height或min-height），否则垂直方向无参考基准 - 比 Flex 更“霸道”：它会让所有直接子元素都居中，若容器内还有其它元素，得额外控制
绝对定位 + transform 是脱离文档流的精准方案
适合模态框、加载占位图、背景图等需要脱离正常流、且尺寸不确定的场景。它不依赖父容器是否设高，只要父容器 position: relative 就行。
容易踩的坑：很多人只写 top: 50%; left: 50%，结果图片左上角在中心，而不是整个图片居中——必须配 transform: translate(-50%, -50%) 才能真正居中。
- 父容器要加
position: relative，否则absolute会往上层找定位上下文 -
transform的百分比是相对于自身宽高的，所以无需知道图片具体尺寸 - 注意 z-index，避免被其它元素遮挡
- 如果图片是响应式缩放的，这个方案依然有效，因为
transform总是作用于渲染后的尺寸
为什么 text-align 或 margin: 0 auto 不够用
这两个方法只能解决水平居中。想垂直居中？text-align: center 对块级图片无效；margin: 0 auto 只作用于水平方向，对垂直方向完全没影响。
有人尝试给图片加 vertical-align: middle，但那仅在行内/表格单元格环境里起作用，单独用在普通 <div> 里是无效的。
-
text-align: center只影响行内级子元素，<img>默认是 inline，但一旦设了display: block，它就不再受 text-align 影响 -
margin: 0 auto要求元素是块级且有明确宽度（width），否则左右 margin 自动为 0 - 试图用
line-height配合vertical-align实现垂直居中，只适用于单行内容，且父容器高度必须固定，实用性低
