flex垂直居中失效的主因是父容器无明确高度，需设height/min-height或被内容撑开；absolute+transform需配合position:relative和translate(-50%,-50%)；vertical-align仅对table-cell/inline元素生效。
flex 居中没效果，先查父容器高度和 display
写了 display: flex 和 align-items: center 却不垂直居中？大概率是父容器没撑开。flex 的交叉轴对齐必须有可测量的高度参考——不是“写了就生效”，而是“有高才可居中”。
- 父容器必须设
display: flex（不能只在子元素上写） - 父容器要有明确高度：比如
height: 100vh、min-height: 300px，或被内容/ padding 撑开 - 避免同时给子元素设
margin: auto，尤其在 Safari 中会冲突偏移 - 检查 computed styles，如果父容器
height是0px或auto，那align-items就是空转
absolute + transform 垂直偏了，重点看定位上下文和 transform 写法
用 top: 50% + transform: translateY(-50%) 结果元素上边缘卡在中间？说明漏了关键一环：它必须配合 left: 50% 和完整的 translate(-50%, -50%) 才能真正以自身中心对齐。
- 父容器必须设
position: relative（或absolute/fixed），否则top: 50%会相对于 viewport 定位，滚动时飘走 -
transform: translate(-50%, -50%)不能拆成两个独立声明，也不能写成translateX(-50%) translateY(-50%)（虽等效但易漏、难维护） - 子元素若宽高动态（如图片未加载完），会出现短暂闪动；可提前加
min-height或用aspect-ratio占位
表格单元格里 vertical-align: middle 不起作用？问题出在 display 类型
vertical-align 只对 table-cell、inline、inline-block 元素生效。在 td 里放一个 div 并设 vertical-align: middle，根本不会动——因为 div 默认是 block，这个属性对它完全无效。
- 要么把子元素改成
display: inline-block，再配vertical-align: middle - 要么直接给
td加display: flex; align-items: center; justify-content: center（现代写法更可控） -
height在表格中对多行文本、图片基本无效，强行设置只会裁剪或溢出；改用min-height + padding更可靠
line-height 和 height 不一致导致视觉错位？别硬塞 height
给文字容器设 height: 40px 和 line-height: 40px 看似能居中，但只要换行、加图标、字体切换，立刻破功。这不是 bug，而是 height 和 line-height 控制的不是同一维度。
-
line-height控制的是行框（line box）高度，影响基线对齐；推荐用无单位值（如line-height: 1.5），避免 px 固定值失衡 -
height是容器盒高度，对内联内容（如文字、图片）不具约束力；表格单元格、浮动布局中尤其容易失效 - 真要控高，优先用
min-height+padding组合，让内容有下限又保弹性 - 含图片时，
img默认display: inline，会拉高基线；设display: block或包裹一层flex容器更稳
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
