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

debugcn 发表于 Dev

饼干

我有以下要垂直放置的卡的代码：

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;

但是结果如下：

任何人都有想法为什么它不起作用？

95faf8e76605e973

我认为您想要的是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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。