Flexbox 实现视口级响应式垂直居中是最可靠方案：父容器设 display: flex、justify-content: center、align-items: center，并配 height/min-height: 100vh；img 保持文档流内，加 max-width: 100% 和 height: auto 防溢出。
flex布局实现视口级响应式垂直居中
这是当前最可靠、最直观的方案，能随窗口缩放自动保持图片在容器中心，且不依赖图片原始尺寸。关键不是给 img 加样式，而是控制它的父容器上下文。
必须同时满足三个条件：
- 父容器设
display: flex、justify-content: center（水平）、align-items: center（垂直） - 父容器高度用
height: 100vh或min-height: 100vh，确保交叉轴有明确长度 -
img保持文档流内（不能有position: absolute、float或display: none）
图片自身建议加 max-width: 100% 和 height: auto，防止溢出或拉伸。若容器宽高比固定（如全屏封面），可额外加 object-fit: cover。
绝对定位 + transform 在响应式容器中失效的常见原因
这个方案看似简单，但在响应式场景下极易翻车，尤其当容器宽高随视口变化时。
立即学习“前端免费学习笔记（深入）”；
典型错误写法：<div style="position: relative;"><img style="position: absolute; top: 50%; transform: translateY(-50%);"></div>
问题出在：
- 父容器没设
height或min-height，导致top: 50%计算基准为 0，图片贴顶 - 父容器用了
height: 100vh却没配position: relative，top: 50%会相对于 viewport 计算，滚动时飘移 - 图片加载延迟或懒加载未完成时，
transform会先按 0 高度计算，造成“顶部闪动”
修复方式：显式设父容器 position: relative; min-height: 100vh;，并给 img 加 max-height: 100vh 和 height: auto 缓冲尺寸抖动。
vertical-align: middle 在响应式布局中为什么总不生效
这个属性根本不是为“容器内居中”设计的，它只对行框（line box）或表格单元格（display: table-cell）起作用，且对齐基准是“行框中线”，不是容器几何中心。
在响应式页面中失效更频繁，因为：
- 父容器
font-size或line-height随媒体查询变化，直接扰动对齐位置 - 图片被包裹在
<p>或<div>中，脱离了行内上下文 - 设了
display: block后，vertical-align完全失效（块级元素不参与行框布局）
即使强行用 line-height: 100vh; font-size: 0; 配合 vertical-align: middle，也极难适配小屏——line-height 无法响应式缩放，容易裁剪或留白失控。
Grid 的 place-items: center 是否更省事
是的，place-items: center 一行替代 justify-content + align-items，语义清晰、代码简洁，且天然支持响应式高度（如 min-height: 100vh）。
但要注意兼容性断层：
- IE 完全不支持，
place-items在 IE11 及以下无效 - 旧版 Android Browser（4.4 及以下）需手动展开为
justify-items: center; align-items: center - 若容器内还有文字或其他子元素，
place-items会对所有子项统一居中，可能破坏图文混排逻辑
纯图片封面、启动页等单元素场景下，display: grid; place-items: center; min-height: 100vh; 是最干净的选择。
真正麻烦的不是选哪种方法，而是忘记“居中”永远发生在某个上下文中——flex 的上下文是父容器的主轴/交叉轴，absolute 的上下文是最近的 position: relative 祖先，而 vertical-align 的上下文是行框。一旦上下文塌陷（比如高度未定义）或被覆盖（比如 display 被改写），再多次声明 center 也没用。
