align-items: center没反应是因为三个硬条件缺一不可：父容器必须设display: flex；必须有高度约束（如min-height或height），否则交叉轴长度为0；子元素不能脱离文档流（如加position: absolute或float）。
flex 布局为什么写了 align-items: center 却没反应
不是属性写错了，而是三个硬条件缺一不可：display: flex必须加在父容器上，align-items: center才生效；父容器得有高度约束（比如min-height: 200px或height: 100vh），否则交叉轴长度为 0，“居中”无从计算；图片不能脱离文档流——如果加了position: absolute或float，flex 对齐规则直接跳过它。
常见误操作：justify-content: center写了，align-items: center漏了；或者把display: flex错加在<img>自身上；又或者父容器是却没设height，导致整个页面高度塌陷。
absolute + transform 怎么避免图片飘到左上角外
关键不是transform写得对不对，而是定位上下文是否建立：top: 50%和left: 50%默认相对于最近的已定位祖先元素（即position: relative/absolute/fixed的父容器），如果父容器没设position: relative，就会相对于 viewport 计算——滚动时图片立刻“飞走”。
- 父容器必须加
position: relative（或absolute/fixed） -
transform: translate(-50%, -50%)必须配全top: 50%和left: 50%，少一个都不行 - 图片宽高未加载完成时（尤其懒加载场景），会出现顶部闪动——可提前用
min-height或aspect-ratio占位
text-align: center 和 margin: 0 auto 能不能垂直居中
不能。text-align: center只影响行内级内容的水平对齐，对垂直方向完全无效；margin: 0 auto只在块级元素上有左右居中效果，且前提是display: block + 明确宽度，它压根不参与垂直方向计算。
这两个方案常被误用于“双向居中”，结果就是图片始终贴顶。它们只适合单点需求：text-align: center用于段落内一张图的水平居中；margin: 0 auto用于卡片里固定宽高的图片水平居中——别指望它们解决垂直问题。
grid 的 place-items: center 为什么有时不生效
place-items: center确实一行搞定，但它的生效前提是父容器启用了display: grid，且不能和已有grid-template-areas或复杂轨道定义冲突。IE11 不支持该属性，需回退到justify-items: center; align-items: center。
更隐蔽的问题是：如果父容器本身是 flex 容器，再套一层display: grid可能破坏原有布局流；如果子元素是多个（比如图片+文字），place-items会对所有直接子元素生效，而非仅目标图片——这时候反而要用justify-self/align-self单独控制。
真正决定方案选择的，从来不是“哪个最酷”，而是父容器是否可控、是否允许改 display 类型、是否要兼容老浏览器——flex 失效往往卡在 height 塌陷，absolute 飘移基本是因为漏了position: relative，这些细节比语法本身更值得盯住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
