如何获得反应式引导卡垂直居中？

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>

Answer 2

    import React from 'react';

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

    const Login = () => {
        return(
            <Container className="d-flex h-100" **style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>**
                <Card>
                    <CardHeader>
                        <CardTitle>
                            Login
                        </CardTitle>
                    </CardHeader>
                    <CardBody>
                        do something
                    </CardBody>
                </Card>
    </Container>
);
    }; 

    export default Login;