使用 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 上协同配置弹性属性，实现真正意义上的居中。
✅ 推荐实现方案
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" }}。
通过这一方案，你既能严格保持容器高度可控，又能实现像素级精准的水平+垂直居中，兼顾语义清晰性与工程健壮性。
