flex布局垂直居中需父容器有明确高度，仅设align-items: center无效；推荐min-height: 100vh或place-items: center（grid），并配合max-width: 100%和height: auto防图片变形。
flex布局垂直居中必须设父容器高度
写了 align-items: center 却没效果？八成是父容器高度塌陷了。Flex 的垂直对齐依赖交叉轴（通常是高度）有可分配空间，如果父容器没设 height 或 min-height，又没内容撑开，那 “center” 就无从计算——图片会贴顶显示，甚至整个容器高度为 0，图片直接“消失”。
常见错误场景：
- 在
上直接加display: flex—— 它会让所有直系子元素变成 flex item，破坏原有结构 - 用
max-width: 100%做响应式，但父容器只写了width: 100%，漏掉高度声明 - 父容器用了
float或position: absolute，导致自身脱离文档流、高度丢失
推荐写法：min-height: 100vh（视口全高）或 min-height: 300px（带兜底），比单纯 height: 100% 更可靠。
margin: 0 auto 对垂直居中完全无效
这个写法只作用于水平方向，浏览器规范明确不支持 margin: auto 在垂直轴上生效。给 <img> 加 display: block 和 margin: 0 auto 后，图片只会水平居中，垂直方向依旧按文档流默认位置（通常是顶部）渲染。
别被“auto”误导——它只是让左右外边距平分剩余宽度，和上下毫无关系。试图靠它实现垂直居中，本质是方向性误用。
如果你真需要垂直居中，必须换方案：flex、grid 或 position: absolute + transform，不能硬凑 margin。
place-items: center 是最简双向居中方案
现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2022）下，place-items: center 是目前语义最清晰、代码最少的解法，等价于同时写 justify-content: center 和 align-items: center，且无需关心图片尺寸。
但有两个硬约束：
- 必须作用在父容器上，不是
<img>自身 - 父容器必须有明确高度参照，比如
height: 100vh或min-height: 400px
示例：
<div style="display: grid; place-items: center; height: 100vh;"> @@##@@ </div>注意：IE 全系不支持，老项目慎用。
响应式图片本身要防拉伸变形
即使居中逻辑正确，图片也可能因尺寸失控而溢出、拉伸或模糊。关键不是“居中了就行”，而是“居中且保持原比例”。
必须给 <img src="logo.png" style="max-width:90%"> 加这两条：
-
max-width: 100%：防止宽度过大撑破容器 -
height: auto：强制等比缩放，避免固定height导致变形
漏掉 height: auto 是高频翻车点——尤其在 max-width: 100% 下，浏览器可能保留原始高度，造成图片被压扁或拉长。
真正难的不是写出居中代码，而是判断当前场景到底需不需要垂直居中、父容器是否具备高度条件、以及图片自身是否还在可控尺寸范围内。这三个点串起来，才是响应式图片垂直居中的完整闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
