How to get bootstrap card to stay in the middle of the screen in reactjs

Question

I tried to get my card to stay in the middle of the screen however its not working. I used align-items and justify-content. I have looked on different sites.

//Login.js

import React, { Component } from 'react';
import './App.css';

class Login extends Component {
  render() {
    return (
      <div className="App">
        <div className="card cardalign w-50">
          <div className="card-body">
          <img className="logo" src="https://cdn.macrumors.com/article-new/2018/05/apple-music-note-800x420.jpg"/>
                <h1 className="signintext">MusicFlo Signin</h1>
                <form className="logininputs">
                <input className="emailinput" placeholder="Email"/>
                <input className="passwordinput" placeholder="Password"/>
                <button className="btn btn-primary btn-md m-2">Log In</button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default Login;

And the css below

//App.css

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.logo {
  height:120px;
  width: 220px;
  border-radius: 50%;
  margin-top: 150px
}

.signintext {
  margin-top: 50px;
  font-style: italic
}

.logininputs {
  display:flex;
  flex-direction: column;
  align-items: center
}

.emailinput {
  width: 30vw;
  height: 5vh;
  margin-bottom: 10px;
  border: solid 2px indigo
}

.passwordinput {
  width: 30vw;
  height: 5vh;
  border: solid 2px indigo
}

.card {
  align-items: center;
  justify-content: center;
  background-color: lightgrey;
  border: 5px solid black

}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

I looked through the reactjs documentary. It still doesnt show in center. Please see picture. Thank you

Any info would be great

Solution 1

add this to App css class

margin-left: auto;
margin-right: auto;

Center div

Solution 2

These guys:

  align-items: center;
  justify-content: center;

only work when set in conjunction with display: flex.

Additionally, they only work on the children of the flex container, so I don't think it would work to make card the flex container (assumming it is card that needs to be centred). So it is the parent of card which should have these settings:

display: flex;
align-items: center;
justify-content: center;
width: 100%; // make sure the parent is full screen 
height: 100%; // so that the content will center correctly

Comments

[Kenny Quach]

It doesnt show the whitespace that exists when i upload the photo. But basically, its on the upperleft corner of my screen

[errorau]

Possible duplicate of stackoverflow.com/questions/39031224/…

[DevJem]

Possible duplicate of How to center cards in bootstrap 4?

[4ndy]

or - margin: 0 auto;