align-items: center 未生效主因是父容器无明确高度或未触发bfc；需设height/min-height、避免浮动截断；absolute居中须配transform；table中vertical-align仅对内联内容有效；ios下vh抖动可用dvh或absolute替代。
flex 布局里 align-items: center 为什么没生效
常见原因是父容器没设 height 或没触发 BFC，导致子元素“无处可居中”。flex 垂直居中依赖父容器有明确高度（比如 height: 100vh）或内容撑开高度；如果父容器高度为 auto 且子元素又没给高度，align-items: center 看起来就像没反应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认父容器设置了
display: flex和明确的height（如min-height: 100vh更稳妥） - 避免父容器被
Float、position: absolute或overflow: hidden意外截断高度 - 如果子元素是单行文本，
line-height和height相等也能“伪居中”，但不推荐——它只对纯文本有效，且响应式下易错位
用 position: absolute + transform 居中时偏移量不准
典型错误是只写 top: 50% 却忘了配合 transform: translateY(-50%)。只靠 top: 50% 是把元素上边缘拉到父容器中间，不是整体居中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须成对使用：
top: 50%+left: 50%+transform: translate(-50%, -50%) - 父容器需有
position: relative（或absolute/fixed），否则absolute会相对于 viewport 定位 - 这个方案兼容性好（IE9+），但要注意：若子元素宽高动态变化，
transform仍能正确居中，比margin-top: -Xpx更可靠
表格单元格里文字垂直居中失效
表格默认 vertical-align: middle 只对单元格内联内容（如文本、img）起作用，如果里面套了 div 且没设 display: table-cell，就会失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 直接在
td或th上加vertical-align: middle（这是最简单有效的做法） - 如果必须用
div包裹内容，且不能改 html 结构，可给该div加display: flex; align-items: center; height: 100%，但要确保父td有固定高度 - 注意：CSS Grid 或 Flex 布局替代表格时，
vertical-align完全无效，得换思路
移动端 safari 里 flex 垂直居中偶尔抖动或偏移
部分 iOS 版本（尤其是 iOS 12–14）对 vh 单位解析不稳定，滚动时地址栏显隐会导致 100vh 实际值变化，从而让居中位置跳动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免直接用
height: 100vh，改用min-height: 100vh或 js 动态设置style.height = window.innerHeight + 'px' - 更轻量的解法：用
height: 100dvh（dvh是动态视口单位，iOS 16+ 支持，android chrome 100+ 也支持） - 如果必须兼容老 iOS，优先选
position: absolute方案——它不依赖父容器高度计算，抗抖动更强
实际项目里最容易被忽略的是：居中目标是否真的“需要垂直居中”。很多场景下，用 padding 或 line-height 模拟视觉居中更轻量，也更可控。别一上来就堆 flex 或 absolute。