Display grid container in the middle of the screen in React - grid

Question

I am trying to display container of the grid in the middle of the screen. To create Grid layout I am using a bootstrap library in React. But I am not getting the output as per expectation. Can anyone suggest me the right way to do it.
App.js
import React, { Component } from "react";
import { Col, Row } from "react-bootstrap";
import "./App.css";
class App extends Component {
render() {
return (
<div className="container">
<Row className="purchase-card">
<Col>
<h1>Hello World!</h1>
</Col>
</Row>
</div>
);
}
}
export default App;
App.css
.container {
margin-top: 10px;
}
.purchase-card {
width: 350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 1em;
}
output ::
expected output ::

Answer 1

I am using something like this to align the content into center:
<Container fluid>
<Row>
<Col xs={12} className="text-center">
<Row className="justify-content-center">
<Col>
{/* your conntent goes here, the col size is depends on you */}
</Col>
</Row>
</Col>
</Row>
</Container>
Also, I'm using this when I want position everything into the middle of the screen (a login screen for example):
<Container className="vh-100" fluid>
<Row className="h-100">
<Col xs={12} className="my-auto text-center">
<Row className="justify-content-center">
<Col>
{/* your conntent goes here, the col size is depends on you */}
</Col>
</Row>
</Col>
</Row>
</Container>
The number of rows with the justify-content-center className can appear as many times as you want to hold something.