在React的屏幕中间显示网格容器

Question

我正在尝试在屏幕中间显示网格的容器。为了创建网格布局，我在React中使用了一个引导程序库。但是我没有得到预期的输出。谁能建议我正确的方法。

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;
}

输出::

预期输出::

Answer 1

我正在使用类似的方法将内容对齐到中心：

<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>

此外，当我要将所有内容都放置在屏幕中间（例如登录屏幕）时，我正在使用它：

<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>

具有justify-content-center className的行数可以显示任意多次，以保持某样内容。