最稳的响应式垂直居中方案是display: flex + align-items: center，但必须同时满足父容器设display: flex、height: 100vh、图片不脱离文档流；height: 100vh比min-height更可靠，图片需加max-width: 100%和height: auto防变形。
flex 布局 + 100vh 是最稳的响应式垂直居中方案
display: flex 配合 align-items: center 能真正实现“随窗口缩放仍保持垂直居中”，但必须满足三个硬条件：父容器设 display: flex、明确高度（如 height: 100vh）、图片不能脱离文档流。
-
height: 100vh比min-height: 100vh更可靠——后者在内容撑高后可能让居中失效 - 图片加
max-width: 100%和height: auto，防止宽屏下溢出或窄屏下拉伸变形 - 别给图片设
position: absolute或float，否则align-items直接跳过它 - 旧版 Android 浏览器（4.4 及以下）需补
display: -webkit-flex
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <img src="photo.jpg" style="max-width: 100%; height: auto;"> </div>
absolute + transform 在滚动时容易飘移，必须配 position: relative
这个方案兼容性好（IE9+），但不是“写完就稳”。常见翻车点是父容器没设 position: relative，导致 top: 50% 相对于 viewport 计算，一滚动图片就偏移。
- 父容器必须显式设
position: relative，且带明确高度（如min-height: 100vh） -
transform: translateY(-50%)必须和top: 50%成对出现，单写任意一个都无效 - 图片加载前宽高未知，可能出现顶部闪动；可加
min-height: 200px或用aspect-ratio缓解
<div style="position: relative; min-height: 100vh;"> <img src="logo.png" style="position: absolute; top: 50%; transform: translateY(-50%); max-width: 100%; height: auto;"> </div>
vertical-align: middle 在响应式场景下基本不可靠
很多人试过给 img 加 vertical-align: middle，发现没反应——因为它只对齐“行框中线”，不是容器中点，受父容器 font-size 和 line-height 牵制。
- 单独写
img { vertical-align: middle }几乎无效 - 若父容器有文字，图片会跟文字基线对齐，视觉上明显偏下
- 强行用
line-height: [高度]+font-size: 0配合，代码脆弱，小屏换行或字体加载延迟时易崩 - 表格单元格（
td）里用vertical-align: middle倒是有效，但要求td有明确高度，且不适用于自由布局
图片太大时，居中会失效，必须加尺寸约束
居中逻辑本身不处理溢出。如果图片原始尺寸远超容器，flex 或 absolute 都只能把它“居中地溢出”。
立即学习“前端免费学习笔记（深入）”；
- 必须加
max-width: 100%（水平防溢出）和max-height: 100%（垂直防溢出） - 同时设
height: auto或width: auto，保持宽高比 - 若需裁剪而非缩放，改用
object-fit: cover，但注意 IE 不支持
真正容易被忽略的是：居中效果是否成立，取决于“容器有没有提供可计算的交叉轴长度”。很多响应式失败，不是 CSS 写错了，而是父容器高度塌陷了——比如只写了 width: 100%，却没设 height 或 min-height。
