如何在CSS Grid单元格内垂直对齐内容？align-items:center致行高不一致

嘿，这个问题我刚好踩过坑，咱们来一步步捋清楚怎么解决～

先说说为什么你之前的方法没生效 #

• vertical-align: middle：这个属性只对行内/行内块元素、表格单元格管用，Grid容器的子元素是grid item，默认是块级元素，所以这个属性对它完全不起作用。
• align-items: center（容器上设置）：这个是控制grid item在单元格垂直方向的对齐，但你的grid-template-rows设的是auto，单元格高度会跟着item的内容高度走，内容少的单元格高度会被压缩，自然就出现了各行高度不一致的问题。

最优解决方案：Grid负责布局，Flexbox负责内容对齐 #

最灵活、兼容性最好的方法是给每个grid item（也就是你的.box类）内部用Flexbox来处理内容垂直居中，完全不影响Grid的整体布局结构。

修改后的完整代码：

body { margin: 40px; }
.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col] 100px [col] 100px [col] 100px;
  grid-template-rows: [row] auto [row] auto [row] ;
  background-color: #fff;
  color: #444;
}
.box {
  background-color:#444;
  color:#fff;
  padding:20px;
  font-size:150%;
  /* 新增的核心垂直居中样式 */
  display: flex;
  align-items: center;
  /* 如果还需要水平居中，再加这行：justify-content: center; */
}
.a { grid-column: col / span 2; grid-row: row 1 / 3; }
.b { grid-column: col 3 / span 1; grid-row: row ; }
.c { grid-column: col 3 / span 1; grid-row: row 2 ; }
.d { grid-column: col / span 1; grid-row: row 3; }
.e { grid-column: col 2 / span 1; grid-row: row 3; }
.f { grid-column: col 3 / span 1; grid-row: row 3; }

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

为什么这个方法最靠谱？ #

它把整体布局和内容对齐拆分开了：Grid负责控制行列的整体结构，保证各行高度和你原来的设置一致；Flexbox只在每个单元格内部处理内容的垂直对齐，不管单元格高度是多少，内容都能完美居中，而且兼容性覆盖所有现代浏览器，甚至IE11也能支持（需要加前缀）。

其他备选方案（按需选择） #

如果你的场景有特殊需求，也可以试试这两个方法：

• 固定行高+align-self：先给grid-template-rows设置固定高度（比如150px），然后给.box加align-self: center，适合需要固定行高的场景，但不够灵活。
• line-height（仅单行文本）：如果单元格里都是单行文本，可以设置line-height等于单元格高度，但多行文本会直接崩掉，通用性很差。

内容的提问来源于stack exchange，提问作者user13286