title: Centering the react component doesn't work
body: <p><strong>LoginComponent.js</strong></p>
  
  <pre><code>  render() {
      return (
         &lt;div className="col-md-6"&gt;
          &lt;form&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputEmail1"&gt;Email address&lt;/label&gt;
              &lt;input value={this.state.email} onChange={this.handleChange} type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" /&gt;
              &lt;small id="emailHelp" class="form-text text-muted"&gt;We'll never share your email with anyone else.&lt;/small&gt;
            &lt;/div&gt;
          &lt;/form&gt;
  
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>This is how my LoginComponent, which is just a login box component renders like above. I wanted to center align this.</p>
  
  <p><strong>Login.js</strong></p>
  
  <pre><code>const loginStyles = {
    display: 'flex', justifyContent: 'center'
  }
  
  class Login extends Component {
    constructor(props) {
      super(props);
  
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;LoginComponent style={loginStyles}/&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>So, I simple used flex and justifiyContent to make the box go to center of the page, but it keeps staying on the top-left of the page. How can I handle this issue?</p>