css布局如何实现垂直居中_利用 flex align-items center 或 grid place-items-css教程

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 居中“没反应”？常见失效场景

不是写法错，而是上下文破坏了居中逻辑。最常踩的坑集中在高度和嵌套上。