本文介绍使用 css flexbox 原生能力，结合 ant design 的 row/col 布局系统，实现 card 在容器内真正水平+垂直居中的专业方案，避免 `margintop` 导致高度溢出等副作用。
在 Ant Design 中，仅靠
正确解法是主动启用 Flexbox 布局能力：将
以下是推荐的实现代码：
import "./styles.css";
import React from "react";
import { Card, Col, Row } from "antd";
const App = () => (
Card content, Card content, Card content
);
export default App;
配套的全局样式（styles.css）确保根容器撑满视口，避免因默认 margin/padding 或尺寸未设导致 flex 布局失效：
*, *::before, *::after {
box-sizing: border-box;
}
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}✅ 关键要点总结：
- 不要依赖 marginTop / paddingTop 等“模拟居中”方式——它们破坏布局流，易引发高度失控；
负责定义整体高度与横向对齐，
需显式声明 display: flex 才能启用 flex 子项居中能力； - flex: 1 确保
充分伸展，使 justify-content: center 有明确的参考宽度； - 若需响应式适配，可将 height: 500 替换为 minHeight: '100vh' 或结合 useMediaQuery 动态控制；
- 此方案完全不侵入 Ant Design 内部样式，无版本兼容风险，且便于后续扩展（如添加多个 Card 并排居中）。
掌握这一模式后，你不仅能精准控制 Card 居中，还可复用于 Modal 内容、登录表单、空状态页等各类需要严格居中的场景。
