Flexbox垂直居中需父容器设display: flex和明确高度（如min-height: 100vh），align-items: center才生效；Grid用place-items: center最简；absolute居中须配合position: relative、top/left: 50%及transform；移动端优先用100dvh防滚动条。
Flexbox垂直居中为什么加align-items: center还不生效？
因为父容器默认是row方向，align-items控制的是交叉轴对齐——只有当父元素设了display: flex且高度有约束（比如height或min-height），它才起作用。常见错误是父容器没设高度，或者忘了加justify-content: center来同时水平居中。
- 父容器必须有明确高度（
height: 100vh、min-height: 100vh等） - 子元素不能有
margin: auto干扰（Flex下它不参与居中逻辑） - 如果子元素是块级且宽高不定，
align-items: center+justify-content: center就足够 - 避免在子元素上设
vertical-align（它对Flex子项无效）
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Grid实现单个子元素垂直居中要不要写place-items？
要，而且最简方案就是place-items: center。它等价于justify-items: center + align-items: center，但只对网格容器内的直接子项生效。注意：它和place-content不同，后者还管行/列间距。
- 父容器必须是
display: grid - 不需要定义
grid-template-rows或grid-template-columns也能用 - 如果子元素本身设置了
align-self或justify-self，会覆盖place-items - 在IE中完全不支持，
place-items是CSS Grid Level 2特性
.container {
display: grid;
place-items: center;
min-height: 100vh;
}
老项目里用position: absolute居中，transform: translate(-50%, -50%)为什么偏移不准？
因为transform基于元素自身宽高计算，如果子元素是图片、文字或未设置width/height的块，浏览器可能在渲染完成前无法准确读取尺寸，导致回流后位置跳动。更隐蔽的问题是父容器没设position: relative，导致top/left相对于视口定位。
- 父容器必须有
position: relative（或absolute/fixed） - 子元素需明确设
top: 50%+left: 50% -
transform: translate(-50%, -50%)必须和top/left配合使用，缺一不可 - 对于图片，建议加上
max-width: 100%防止溢出影响计算
.container {
position: relative;
min-height: 100vh;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
移动端适配时，Flex/Grid居中出现滚动条或内容被截断
本质是min-height: 100vh在部分iOS Safari和微信内置浏览器中会把地址栏高度算进vh，导致容器实际高度超过视口，触发滚动。另外，某些安卓WebView对flex: 1嵌套处理不稳定。
立即学习“前端免费学习笔记（深入）”；
- 优先用
min-height: 100dvh（dvh是动态视口单位，已广泛支持） - 避免多层
display: flex嵌套+flex: 1，容易触发渲染bug - 如果用Grid，别混用
grid-template-rows: 1fr auto这类写法去撑高，改用min-height更可控 - 微信内嵌浏览器中，可加
body { margin: 0; height: 100%; overflow: hidden; }兜底
真正卡住人的，往往不是“怎么写”，而是“为什么写了却没效果”——查一遍父容器的display、height、position，比重写三遍CSS更快。
