垂直居中用 align-items: center（flex）或 place-items: center（grid）；父容器须设 display: flex/grid 和明确高度（如 min-height: 100vh），否则居中失效。
flexbox 垂直居中：用 align-items 还是 justify-content？
垂直居中靠 align-items: center，但前提是父容器设了 display: flex 且有明确高度（或能撑开高度）。justify-content: center 管水平，别混用。
常见错误是父容器没设高度，比如只写了 height: 100% 却没给祖先元素设高，结果子元素“塌”在顶部。推荐用 min-height: 100vh 保底。
实操建议：
- 父容器必须加
display: flex和align-items: center - 单行内容可加
justify-content: center实现水平+垂直居中 - 若子元素是块级且需自适应宽高，不用额外设
margin: auto - 避免对子元素设
margin-top: 50%或transform: translateY(-50%)—— 这是老办法，flex 下多余
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.item {
/ 不需要 margin 或 transform /
}
grid 垂直居中：place-items 一行解决
place-items: center 是 justify-items 和 align-items 的简写，对 grid 容器内所有直接子项生效。它比 flex 更“无感”——不需要关心子项是否单个、是否换行。
立即学习“前端免费学习笔记（深入）”；
注意：它只作用于 grid 子项（即 grid-item），不是后代元素。如果中间嵌套了一层 div，那层必须也设为 display: contents 或直接去掉。
实操建议：
- 父容器设
display: grid+place-items: center即可 - 无需定义
grid-template-rows或grid-template-columns，自动创建隐式网格 - 若需兼容 IE，grid 不可用，得降级到 flex 或绝对定位
- 想只居中某一个子项（而非全部），改用
justify-self: center; align-self: center
.container {
display: grid;
place-items: center;
min-height: 100vh;
}flex 与 grid 居中行为差异：子元素换行时表现不同
flex 默认是单行布局（flex-wrap: nowrap），多个子项会横向挤在一起；grid 默认是多行网格，每个子项占一个格子。这意味着：
- 多个子项用 flex 居中：它们并排居中，整体水平居中、垂直居中
- 多个子项用 grid +
place-items: center：每个子项各自在自己的网格单元里居中，视觉上可能错落（除非显式设grid-template-columns: repeat(1, 1fr)） - 如果要让多个子项“堆成一列”再整体居中，flex 更直观（加
flex-direction: column）；grid 则需配合grid-auto-flow: column或明确行列定义
性能上无明显差别，但 grid 在复杂二维布局中扩展性更强；flex 更适合一维流式场景。
容易被忽略的坑：父容器未脱离文档流或含浮动
如果父容器本身是浮动元素（float: left）、绝对定位（position: absolute）但没设宽高，或者被 overflow: hidden 截断，flex/grid 的居中会失效——因为容器“不可见高度”。
另一个高频问题：使用 vh 单位时，页面有滚动条导致视口高度计算偏差。iOS Safari 对 100vh 的处理尤其不稳定，建议用 100dvh（如支持）或 JS 动态设置高度。
调试建议：
- 在浏览器开发者工具中检查父容器的 computed height 是否大于 0
- 临时加
outline: 1px solid red看父容器是否“存在” - 禁用所有浮动、定位、
overflow相关样式，逐步排查
真正卡住的时候，往往不是居中逻辑错了，而是容器根本没拿到高度。
