如何在Ant Design Grid的<Col>组件内实现div元素垂直居中

提问内容 #

我确认该问题此前应该有人提出过，但我暂时没有检索到对应的解答内容。
Ant Design官方Grid组件文档中也未说明相关实现方法。
以下是我目前尝试过的写法，但是并未实现预期效果：

<Col span={4} style={{ display: 'flex', alignItems: 'center' }} >
   <div></div>
</Col>

解答 #

问题原因

你写的样式未生效的核心原因是Col组件默认高度由自身内容撑开，没有显式高度的情况下，align-items: center没有对齐参考基准，看不到居中效果。

可行解决方案

• 方案1（最推荐，适配Ant Design Grid规范）：通过Row组件自带的align属性统一控制子Col垂直对齐

<Row align="middle">
  <Col span={4}>
    <div>需要居中的内容</div>
  </Col>
  <!-- 其他Col组件 -->
</Row>

Row组件默认是flex布局，设置align="middle"会自动让所有子Col的内容垂直居中，无需额外写自定义样式，后续维护成本最低。

• 方案2（单独控制单个Col垂直居中）：给Col显式设置高度

<Col 
  span={4} 
  style={{ 
    height: '100px', // 替换为你实际需要的高度，或者与父容器高度保持一致
    display: 'flex', 
    alignItems: 'center' 
  }} 
>
  <div>需要居中的内容</div>
</Col>

• 方案3（Col高度跟随当前行最高元素自适应）：搭配Row的align="stretch"属性使用

<Row align="stretch">
  <Col span={4} style={{ display: 'flex', alignItems: 'center' }}>
    <div>需要居中的内容</div>
  </Col>
  <Col span={20}>
    <!-- 高度更高的内容，会自动撑开整行高度，左侧Col高度会同步适配 -->
  </Col>
</Row>

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