The method for aligning columns within rows seems to be lacking. Even applying span={24} to the row still results in a block display. Adding flex doesn't help with vertically centering the Card within the Row.
Instead, I decided to stick with plain CSS Flexbox to structure the content layout.
- Row
height: 500 ~ sets the height of the rowbackground: LightGrey ~ visually shows the boundaries of the Rowjustify-content: center ~ horizontally centers the column
- Col
display: flex ~ Enables Flexbox (default for Col is block)background: yellow ~ visually displays the boundaries of the Col align-items: center ~ vertically centers the Cardjustify-content: center ~ horizontally centers the Cardflex: 1 ~ Expands to fill the width of the Row
- Card
background: magenta ~ visually shows the boundaries of the Card
App.jsx
import "./styles.css";
import React from "react";
import { Card, Col, Row } from "antd";
const App = () => (
<Row
style={{
height: 500,
background: "LightGrey",
justifyContent: "center"
}}
>
<Col
style={{
display: "flex",
background: "yellow",
alignItems: "center",
justifyContent: "center",
flex: 1
}}
>
<Card style={{ background: "magenta" }} title="Card title">
<p>Card content, Card content, Card content</p>
</Card>
</Col>
</Row>
);
export default App;
styles.css
*, *::before, *::after {
box-sizing: border-box;
}
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Here's a link to a CodeSandbox that showcases the described layout.
Resources
If you want to learn more about Flexbox layout, check out:
These resources are also helpful: