Is it possible to display my antd card in the center directly when a button is clicked? Currently, I have implemented the code to achieve this behavior but upon clicking the button, the card initially appears on the left before aligning itself in the center. How can I prevent this initial displacement and have the card displayed directly in the center on button click?
const [show, setShow] = useState(false);
<div>
<Button onClick={() => setShow(true)}>Hi</Button>
{show ? (
<Col style={{ height: "750px", width: "100%" }}>
<Card className="cardStyle">
<p>Card title will come here!!!</p>
</Card>
</Col>
) : null}
</div>
Css:
.cardStyle {
flex-direction: row;
justify-content: center;
align-items: center;
width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Could the issue be caused by existing css styles for other components?