CSS使用grid实现垂直居中功能不生效问题求助

常见失效原因及修复方法 #

• 父容器无明确垂直高度
  Grid布局的垂直对齐依赖父容器的高度值，如果父容器高度默认由子内容撑开，没有多余的垂直空间，自然看不到垂直居中效果。给父容器添加明确高度即可，比如占满当前视口：

  .grid-container {
    min-height: 100vh;
    display: grid;
  }
  

• 未设置垂直方向对齐属性
  justify-content/justify-items仅控制水平方向的对齐规则，垂直方向需要额外配置align-content/align-items，也可以直接使用简写属性同时控制两个方向：

  .grid-container {
    min-height: 100vh;
    display: grid;
    /* 水平垂直同时居中 */
    place-content: center;
  }
  

• 子元素单独对齐配置错误
  如果仅需要单个子元素垂直居中，不需要修改父容器全局配置，直接给目标子元素添加align-self: center属性即可。

其他排查点 #

• 检查父容器是否存在overflow属性、浮动、绝对定位等规则干扰Grid布局的高度计算
• 如果配置了grid-template-rows，需要确认当前子元素所在的网格轨道有足够的剩余高度支撑对齐效果

内容的提问来源于stack exchange，提问作者Bob the Builder