flex 布局里 align-items 不生效？检查父容器是不是块级且有高度
很多情况下写完 display: flex 和 align-items: center，子元素就是不居中——大概率是父容器没撑开。flex 的垂直居中依赖父容器明确的高度（height 或 min-height），否则它会按内容自动收缩，导致“居中”无从谈起。
常见错误现象：div 里放了个按钮，加了 flex 居中，但按钮还是贴着顶部；检查 computed styles 会发现父容器 height 是 0。
- 确保父容器设置了
height、min-height或被其他内容撑开（比如有padding或兄弟元素） - 如果父容器是全屏需求，用
height: 100vh最直接，但注意vh在 iOS Safari 中可能因地址栏缩放失效，可补min-height: 100%+html, body { height: 100% } - 避免对 flex 容器本身设
vertical-align，它对 flex 子项无效
position: absolute 配合 transform: translateY(-50%) 的坑
这是兼容性最好、也最容易写错的方案。核心逻辑是：先用 top: 50% 把元素上边缘拉到父容器中间，再用 transform: translateY(-50%) 自身回退一半高度。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative（或其它非static值），否则absolute会相对于最近定位祖先或 viewport 定位 - 如果子元素高度动态（比如文字行数变化），
transform依然可靠；但若用margin-top: -XXpx这种固定偏移，就一定会错位 - 不要漏掉
left: 50%+transform: translate(-50%, -50%)来同时水平居中，否则只写top和translateY只管垂直
表格单元格里垂直居中为什么 vertical-align: middle 有时没用？
vertical-align 只对 table-cell、inline、inline-block 元素有效，而且它控制的是“行内盒子的基线对齐”，不是容器内的绝对居中。
典型问题场景：在 td 里放一个 div，设了 vertical-align: middle 却不生效。
- 因为
div默认是块级，vertical-align对它完全不起作用——得把div改成display: inline-block才行 -
td自身默认就是table-cell，所以直接在td上设vertical-align: middle是有效的，但只影响它的直接子“行内级”内容（比如文字、span、img） - 现代项目尽量别靠表格布局做居中，语义和维护成本都高；真要用，优先用
td { display: flex; align-items: center; justify-content: center }
用 grid 实现单个子元素垂直居中最简写法
Grid 是目前最干净的方案，尤其适合“一个容器、一个子元素”的场景。不用管子元素尺寸，也不用设父容器高度（只要它有明确尺寸即可）。
关键代码只有两行：
parent {
display: grid;
place-items: center;
}
place-items: center 是 justify-items: center + align-items: center 的简写，对单个子项效果等同于居中。
- 如果父容器高度来自内容（比如没设
height），那它依然不会“撑满屏幕”，这时候还是要配合min-height: 100vh - 旧版 Safari（place-items，可降级为
justify-content: center; align-content: center（注意是align-content，不是align-items） - 如果子元素是多个，
place-items会让它们整体居中；要分散排列就得换grid-template-areas或justify-content/align-content组合
真正麻烦的从来不是“怎么写”，而是搞清当前结构里谁是容器、谁是内容、谁负责提供参考尺寸——特别是嵌套多层时，一个 overflow: hidden 或 height: 0 就能让所有居中失效。
