必须配height或min-height才生效，因align-items: center依赖父容器交叉轴有明确尺寸，内容撑开的高度无效；常见漏点包括父容器未设display: flex、子元素用margin: auto冲突、或absolute定位缺position: relative上下文。
flex + align-items: center 必须配 height 才生效
写了 display: flex 和 align-items: center 却没居中？大概率是父容器高度塌陷了。这个组合不认“内容撑开”的高度，必须有明确的 height 或 min-height（比如 height: 100vh、min-height: 400px）。
常见漏点：
• 父容器没加 display: flex —— align-items 对非 flex 容器完全无效
• 子元素用了 margin: auto —— Safari 下会和 flex 居中冲突，导致上下偏移
• 子元素是 display: block 且宽度 100% —— 不影响垂直对齐，但容易误判为整体失效
absolute + transform: translate(-50%, -50%) 要设好定位上下文
这个方案兼容 IE9+，但不是“写了就稳”。关键在父容器必须有定位上下文：
• 忘记给父容器加 position: relative，子元素就会相对于 viewport 定位，一滚动就飘走
• top: 50% 和 left: 50% 缺一不可，不能只写一个
• transform: translate(-50%, -50%) 必须写成一行，拆成 translateX 和 translateY 容易漏或拼错
• 图片或字体未加载完成时，子元素尺寸暂未确定，会出现短暂闪动；可提前设 min-height 或用 aspect-ratio 缓解
grid + place-items: center 适合单子元素场景
display: grid; place-items: center 是最简写法，但要注意适用边界：
• IE11 不支持 place-items，需回退到 justify-items: center; align-items: center
• 若父容器已有 grid-template-areas 或复杂轨道定义，加 place-items 可能覆盖原有对齐逻辑
• 它对所有直接子元素生效，不适合需要差异化对齐的多子元素布局
• 不依赖子元素尺寸是否固定，也不要求父容器显式设高，只要 grid 容器自身有尺寸即可
vertical-align: middle 仅对 table-cell 有效
很多人以为 vertical-align: middle 能直接用在 div 上——不行。它只对 display: table-cell 或原生 <td> 生效：<br>• 把父容器设成 <code>display: table，子元素设成 display: table-cell，再加 vertical-align: middle
• 这种方式会让子元素自动拉伸填满父容器高度，破坏原本的盒模型行为
• 无法与 flex / grid 混用，响应式下难控制
• 现代项目基本不用，除非维护十年没动过的后台系统
真正容易被忽略的点是：没有一种方案能脱离上下文独立生效。flex 要高度约束，absolute 要定位上下文，grid 要浏览器支持，table-cell 要改 display 类型。选哪种，得先看你的父容器现状、子元素是否动态、以及最低要兼容到哪个浏览器版本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
