title: How to get bootstrap card to stay in the middle of the screen in reactjs
body: <p>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.</p>
  
  <p>//Login.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
  class Login extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="card cardalign w-50"&gt;
            &lt;div className="card-body"&gt;
            &lt;img className="logo" src="https://cdn.macrumors.com/article-new/2018/05/apple-music-note-800x420.jpg"/&gt;
                  &lt;h1 className="signintext"&gt;MusicFlo Signin&lt;/h1&gt;
                  &lt;form className="logininputs"&gt;
                  &lt;input className="emailinput" placeholder="Email"/&gt;
                  &lt;input className="passwordinput" placeholder="Password"/&gt;
                  &lt;button className="btn btn-primary btn-md m-2"&gt;Log In&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Login;
  </code></pre>
  
  <p>And the css below</p>
  
  <pre><code>//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);
    }
  }
  </code></pre>
  
  <p>I looked through the reactjs documentary. It still doesnt show in center. Please see picture. Thank you</p>
  
  <p><a href="https://i.stack.imgur.com/Ro3xd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ro3xd.png" alt="enter image description here"></a></p>
  
  <p>Any info would be great</p>