如何在 Ant Design 的 Col 组件中居中显示 Card？

使用 ant design 时，仅靠 col 默认的块级布局无法实现 card 的垂直+水平居中；需结合 css flexbox，在 row 和 col 上启用弹性布局，通过 `justify-content` 和 `align-items` 精准控制对齐。

在 Ant Design 中，Col 组件默认以 display: block 渲染，不支持原生垂直居中。若仅对 Card 设置 marginTop（如 '70%'），虽能视觉上“下移”，但会破坏容器高度约束，导致整体布局溢出或滚动——这违背了固定高度（如 500px）的设计初衷。

正确解法是主动接管布局逻辑：利用现代 CSS Flexbox 能力，在父级 Row 和子级 Col 上协同配置弹性属性，实现真正意义上的居中。

闪念贝壳

闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。

下载

✅ 推荐实现方案

import React from "react";
import { Card, Col, Row } from "antd";

const App = () => (
  <Row
    style={{
      height: 500,
      display: "flex",           // 显式启用 Flex（Row 默认非 flex）
      justifyContent: "center",  // 水平居中 Col
      alignItems: "center"       // 垂直居中子元素（当 Col 不设高度时，此值生效）
    }}
  >
    <Col
      style={{
        display: "flex",
        alignItems: "center",     // 垂直居中 Card
        justifyContent: "center", // 水平居中 Card
        flex: 1                 // 占满 Row 宽度，确保居中基准明确
      }}
    >
      <Card title="Card title" style={{ width: 300 }}>
        <p>Card content, Card content, Card content</p>
      </Card>
    </Col>
  </Row>
);

export default App;

? 关键说明：Row 必须显式设置 display: "flex"（Ant Design v5+ 的 Row 默认不是 flex 容器）；alignItems: "center" 在 Row 上作用于其直接子元素（即 Col），在 Col 上则作用于 Card；flex: 1 确保 Col 充分伸展，避免因宽度不足导致 justify-content: center 失效；Card 无需额外 margin/padding 居中，所有对齐均由父容器 Flex 属性完成。

⚠️ 注意事项

• 若页面根节点（如 #root）未设置 height: 100%，Row 的 height: 500px 可能无法按预期渲染，建议在全局样式中统一重置：

  html, body, #root {
    height: 100%;
    margin: 0;
    padding: 0;
  }

• 避免混合使用 marginTop/paddingTop 与 Flex 居中——二者逻辑冲突，易引发不可预测的偏移；
• 如需响应式居中（例如全屏居中），可将 Row 的 height 改为 minHeight: "100vh"，并添加 style={{ minHeight: "100vh" }}。

通过这一方案，你既能严格保持容器高度可控，又能实现像素级精准的水平+垂直居中，兼顾语义清晰性与工程健壮性。