align-items: center 垂直居中生效需父容器设 display: flex 且有明确高度（如 height、min-height）；主轴为 row 时控制交叉轴（垂直），改为 column 则控制水平，此时需 justify-content: center。
flex 实现垂直居中：align-items: center 的前提条件
align-items: center 能生效，前提是父容器必须是 display: flex，且高度有明确约束（比如 height、min-height 或被内容撑开）。如果父容器高度为 auto 且无高度限制，子元素会“挤”在顶部，align-items 看似无效。
- 父容器需设置
display: flex和至少一个明确的高度来源（如height: 100vh、min-height: 400px） - 默认主轴是水平的（
flex-direction: row），所以align-items控制的是**交叉轴**（即垂直方向）的对齐 - 若主轴改为竖直（
flex-direction: column），则align-items控制的是水平对齐，此时要用justify-content: center垂直居中
div.container {
display: flex;
align-items: center;
justify-content: center; /* 水平也居中 */
height: 300px;
border: 1px solid #ccc;
}grid 实现垂直居中：place-items 是最简写法
place-items: center 是 justify-items: center 和 align-items: center 的缩写，适用于所有子元素。但它只在父容器是 display: grid（或 inline-grid）时起作用，且同样依赖父容器有可计算的高度。
- 不需要定义网格线或
grid-template-rows，单个子元素也能居中 - 比
flex更“无感”——不改变文档流语义，也不隐式产生主轴/交叉轴概念 - 兼容性稍弱：IE 完全不支持
place-items，grid本身在 IE 中需用-ms-前缀且行为不一致
div.container {
display: grid;
place-items: center;
height: 300px;
border: 1px solid #ccc;
}为什么有时候 flex 或 grid 居中“没反应”？常见失效场景
不是写法错，而是上下文破坏了居中逻辑。最常踩的坑集中在高度和嵌套上。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 父容器高度为
height: auto，且没有其他高度约束（如min-height、vh单位、或父级设了固定高），导致可用空间为 0 - 子元素设置了
margin: auto，但父容器不是flex或grid，此时margin: auto在块级上下文中只对水平生效，垂直无效 - 嵌套了多层 flex 容器，但中间某一层漏写了
height: 100%，导致高度链断裂 - 使用了
position: absolute子元素，它已脱离文档流，flex/grid的对齐属性对其无效
选 flex 还是 grid？关键看布局意图
如果只是让一个盒子在父容器里垂直+水平居中，两者效果一致；但一旦涉及更复杂的排列（比如多行、等分布局、响应式重排），选择就影响后续扩展性。
立即学习“前端免费学习笔记（深入）”；
- 用
flex：适合一维为主（比如导航栏、按钮组），需要灵活控制顺序（order）、换行（flex-wrap）或基线对齐（align-items: baseline） - 用
grid：适合二维结构（比如卡片网格、表单布局），尤其是要精确控制行列间距、跨行跨列，或未来可能加grid-template-areas - 现代项目中，
place-items: center更简洁，但要注意 Safari 旧版本对place-items的解析差异（建议加justify-items: center; align-items: center;回退）
实际项目里，flex 的容错率略高，grid 更干净——但真正容易出问题的，从来不是写法本身，而是忘了给父容器“定高”。
