使用 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 = () => (
Card content, Card content, Card content
);
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" }}。
通过这一方案，你既能严格保持容器高度可控，又能实现像素级精准的水平+垂直居中，兼顾语义清晰性与工程健壮性。
