Flex布局居中必须同时设置justify-content和align-items于父容器，并确保父容器有高度参照；仅设其一无效，且text-align: center仅水平居中、需行内上下文，绝对定位居中需配合transform和定位祖先。
flex布局居中必须同时设 justify-content 和 align-items
只写 justify-content: center，图片照样贴顶；只写 align-items: center，图片会水平左对齐。两者缺一不可，且必须作用在父容器上，不是 <img alt="HTML响应式图片怎么水平垂直居中" > 自身。
父容器还得有高度参照，比如 height: 100vh（占满视口）、min-height: 300px 或 height: 100%（前提是祖先有高度）。否则 align-items: center 没空间可居中，效果等同于没写。
- 别直接在
上加display: flex——它会让所有直系子元素变成 flex item，破坏原有结构 - 旧版 Android（4.4 及以下）需加
display: -webkit-flex前缀 - 图片自身建议加
max-width: 100%和height: auto，防溢出、保比例
text-align: center 只能水平居中，且依赖行内上下文
这个方法简单，但限制明确：它把图片当文字排版，所以只管水平，不管垂直；而且一旦图片被设成 display: block 或加了 float，立刻失效。
text-align: center 必须写在父容器上，写在 <img alt="HTML响应式图片怎么水平垂直居中" > 标签里完全没用。如果父容器用了 display: flex 或 display: grid，这个属性也会被忽略。
立即学习“前端免费学习笔记（深入）”；
- 适用于图文混排、页眉 logo 等纯行内场景
- 若父容器设了
font-size: 0（常用于清除 inline 间隙），图片可能消失或错位 - 想垂直居中？得靠外层 flex 容器、
line-height或 padding 配合
绝对定位 + transform 是唯一能脱离文档流精准锚定的方案
当图片需要盖在背景图上、或作为卡片封面时，position: absolute 是绕不开的选择。但硬写 left: 50% 或 top: 30% 会随窗口缩放偏移——真正响应式的写法是三件套：top: 50%、left: 50%、transform: translate(-50%, -50%)。
关键前提是：图片的父容器（或最近的定位祖先）必须设 position: relative，否则定位基准会落到 ，缩放时文字/图标就飘走了。
- 文本和图片要是兄弟元素（同级），别嵌套在没定位的中间层里
- 避免手动写
left: 4%、top: 12%这类固定偏移值 - 如果图片本身是响应式（
max-width: 100%），这套方案依然有效
Grid 的 place-items: center 最简洁，但兼容性略窄
place-items: center 是一行替代 justify-items: center + align-items: center 的语法糖，现代浏览器支持良好，但 IE 完全不支持，旧版 Safari（justify-content + align-content 替代。
和 flex 一样，它也要求容器有明确高度，否则看不出垂直居中效果。优势在于代码少、语义清晰，适合新项目或可控环境。
- 不需要像 flex 那样区分主轴/交叉轴，概念负担小
- 如果容器里还有其他元素，grid 的隐式轨道行为可能影响布局，需留意
- 不推荐在全局
上直接用，容易干扰默认文档流
flex 是最平衡的选择：兼容性够用、逻辑清晰、调试直观。真正容易被忽略的是父容器的高度设置和定位上下文——这两点卡住的人，比写错属性名的多得多。 
