Grid 在屏幕中间显示网格容器 我试图在屏幕中间显示网格的容器。为了创建网格布局，我在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;

输出：：

预期输出：：

---

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

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

{/*您的连接在这里，列大小取决于您*/}

此外，当我想将所有内容都放在屏幕中间时（例如登录屏幕），我会使用此选项：

{/*您的连接在这里，列大小取决于您*/}

---

带有

justify content center

className的行数可以在您想要保存某个内容时多次出现。

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

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

{/*您的连接在这里，列大小取决于您*/}

此外，当我想将所有内容都放在屏幕中间时（例如登录屏幕），我会使用此选项：

{/*您的连接在这里，列大小取决于您*/}

包含

justify content center

className的行数可以在您想要保存某个内容时多次出现

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