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

It doesnt show the whitespace that exists when i upload the photo. But basically, its on the upperleft corner of my screen — Kenny Quach, Mar 21 '19 at 20:42
Possible duplicate of https://stackoverflow.com/questions/39031224/how-to-center-cards-in-bootstrap-4 — errorau, Mar 21 '19 at 20:45
Possible duplicate of [How to center cards in bootstrap 4?](https://stackoverflow.com/questions/39031224/how-to-center-cards-in-bootstrap-4) — DevJem, Mar 21 '19 at 21:01

score 9 · Answer 1 · answered Mar 21 '19 at 20:56

9

add this to App css class

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

Center div

answered Mar 21 '19 at 20:56

Dave Keane

729
8
19

1

or - margin: 0 auto; – 4ndy Mar 21 '19 at 22:27

score 3 · Answer 2 · answered Mar 21 '19 at 20:53

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

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

2 Answers2