How do I get a react bootstrap card to center vertically?

Question

I have the following code for a card to that I want to center vertically:

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;

However the result is as follows:

Anyone have any ideas why it isn't working?

Answer 1

I think what you want is vh-100 for viewport units. I suspect the containing box of Container is not set to take up the viewport

<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

You can just do this:

export const Loading = () => {
  return (
    <Container className='d-flex vh-100 justify-content-center align-items-center'>
      <Spinner
        style={{ width: '0.7rem', height: '0.7rem' }}
        type='grow'
        color='light'
      />
      <h6 className='light'>Loading</h6>
    </Container>
  );
};