align-items: center 失效的根本原因是父容器未满足三重约束：未设 display: flex、交叉轴无明确高度（如 height/min-height）、子元素脱离文档流或存在样式冲突。
直接用 display: flex + align-items: center，但必须确保父容器有明确高度且已启用 flex 布局——缺一不可，否则写了也白写。
flex + align-items: center 为什么常失效？
很多人写了却没效果，问题不在属性本身，而在三个硬约束没满足：
- 父容器没设
display: flex——align-items对非 flex 容器完全无效 - 父容器高度塌陷（比如只写了
width，没设height或min-height，内部又没内容撑开）—— flex 的交叉轴没长度参考，“center”就无从计算 - 子元素用了
margin: auto—— 尤其在 Safari 中会和 flex 居中冲突，导致上下偏移，务必避免混用
position: absolute + transform: translate(-50%, -50%) 的真实限制
这个方案兼容性好（IE9+），但行为强依赖定位上下文，不是“写了就稳”：
- 父容器必须有
position: relative（或absolute/fixed）—— 否则top: 50%会相对于 viewport 计算，滚动时位置飘走 -
transform: translate(-50%, -50%)不能拆成translateX(-50%)和translateY(-50%)单独写，易漏、易拼错，且无额外收益 - 子元素若宽高动态（如图片未加载完、字体未就绪），会出现短暂“闪动”—— 可提前设
min-height或用aspect-ratio缓解
grid 的 place-items: center 适合什么场景？
如果项目最低支持 Chrome 57 / Firefox 52 / Safari 10.1+，display: grid; place-items: center 是语义最强、代码最简的方案：
- 一行搞定水平+垂直居中，不需要区分主轴/交叉轴
- 对所有直接子元素生效，不要求子元素是 “grid item” 或设
grid-area - IE11 不支持
place-items，需回退到justify-items: center; align-items: center; - 若父容器已有复杂
grid-template-areas或轨道定义，加place-items可能覆盖原有对齐逻辑，要小心叠加
真正容易被忽略的是：父容器高度是否“有效”。哪怕写了 height: 100%，若所有祖先都没设高度，最终计算结果仍是 0 —— 这比写错属性更隐蔽，也更常踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
