React中如何让Antd Card在Col组件内居中且保持Col高度固定？

嗨，我来帮你搞定这个问题！你现在遇到的麻烦是用marginTop来让Card居中时，Col的高度莫名被撑大——这其实是因为百分比形式的margin是基于父元素宽度计算的，而且这种方式本质上是把Card往下推，很容易导致布局溢出，根本没法精准实现“在固定高度的Col里居中”的需求。

给你两个靠谱的解决方案，都能完美保持Col的500px固定高度，同时让Card居中：

方案一：用Flex布局（推荐） #

这是现代布局里最简洁的方式，直接把Col变成flex容器，利用flex的对齐属性让Card自动居中：

import React from "react";
import "./index.css";
import { Card, Col } from "antd";

const App = () => (
  <Col style={{ 
    height: '500px',
    display: 'flex',
    alignItems: 'center',  // 垂直居中
    justifyContent: 'center'  // 水平居中，不需要的话可以删掉
  }}>
    <Card>
      <p>Card content Card content Card content</p>
    </Card>
  </Col>
);

export default App;

为什么这个方法有效？ #

flex容器（这里是Col）会把内部元素（Card）纳入自己的布局上下文，alignItems和justifyContent能精准控制元素在容器内的位置，而且Col的高度会严格保持你设置的500px，不会因为Card的位置变化而被撑开。

方案二：用绝对定位 #

如果你更习惯用定位的方式，也可以这样做：给Col设置相对定位，让它成为Card的定位上下文，再给Card设置绝对定位来实现居中：

import React from "react";
import "./index.css";
import { Card, Col } from "antd";

const App = () => (
  <Col style={{ 
    height: '500px',
    position: 'relative'  // 让Col成为定位参考
  }}>
    <Card style={{
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)'  // 让Card自身居中
    }}>
      <p>Card content Card content Card content</p>
    </Card>
  </Col>
);

export default App;

原理说明 #

设置position: relative的Col会成为Card的定位容器，Card的position: absolute会让它脱离文档流（不会影响Col的高度），top:50%和left:50%把Card的左上角移到容器中心，最后transform: translate(-50%, -50%)让Card自身的中心和容器中心对齐，实现完美居中。

两种方法都能解决你的问题，个人更推荐flex布局，代码更简洁，可读性也更高~

备注：内容来源于stack exchange，提问作者Renee