如何让反应引导卡垂直居中？

Question

我想要垂直居中的卡片有以下代码：

import React from 'react';

import {
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  Row,
  Col,
  Container
} from "reactstrap";

const Login = () => {
    return(
        <Container className="d-flex h-100">
            <Row className="justify-content-center align-self-center">
                <Col>
                    <Card>
                        <CardHeader>
                            <CardTitle>
                                Login
                            </CardTitle>
                        </CardHeader>
                        <CardBody>
                            do something
                        </CardBody>
                    </Card>
                </Col>
            </Row>
        </Container>
    );
}; 

export default Login;

但是结果如下：

有人知道为什么它不起作用吗？

Answer 1

我认为您想要的是vh-100 用于视口单元。我怀疑Container 的包含框没有设置为占用视口

<Container className="d-flex vh-100">
  <Row className="m-auto align-self-center">
    <Col>
      <Card>
        <CardHeader>
          <CardTitle>Login</CardTitle>
        </CardHeader>
        <CardBody>do something</CardBody>
      </Card>
    </Col>
  </Row>
</Container>