Center align component (both vertical and horizontal) in React

Question

I am using bootstrap with React.

Below is my render function, and I am trying to center align the form.

render() {
    return (
        <div class="row">
            <div className="col-md-3 center">
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input value={this.state.email} onChange={this.handleChange} type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input value={this.state.password} onChange={this.handleChange} type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
                    </div>
                    <button type="submit" onClick={this.login} class="btn btn-primary">Login</button>
                    <button onClick={this.signup} style={{ marginLeft: '25px' }} className="btn btn-success">Signup</button>
                </form>
            </div>
        </div>


    );
}

And the style for center is as follows:

.center {
    display: flex;
    justify-content: 'center';
    align-items: 'center';
}

The result, however, is as follow. It says on top-left. I thought this was the way to do it.

EDIT

form {
    background: #55acf3;
    padding: 1.5em;
    border-radius: 1em;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.error-message {
    margin-top: 1em;
    color: red;
}

Answer 1

First of all, always use className instead of class when rendering JSX. Then add margin: 0 auto for the horizontal alignment, and height: 100vh and align-self: center for the vertical alignment. This should work.

Styles:

.d-flex {
  display: flex!important;
  height: 100vh;
}

.center {
  margin: 0 auto;
  align-self: center;
}

Component:

render() {
        return (
          <div className={`row ${styles['d-flex']}`}>
            <div className={`col-md-3 ${styles.center}`}>
              <form>
                <div className="form-group">
                  <label htmlFor="exampleInputEmail1">Email address</label>
                  <input value={this.state.email} onChange={this.handleChange} type="email" name="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
                  <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div className="form-group">
                  <label htmlFor="exampleInputPassword1">Password</label>
                  <input value={this.state.password} onChange={this.handleChange} type="password" name="password" className="form-control" id="exampleInputPassword1" placeholder="Password" />
                </div>
                <button type="submit" onClick={this.login} className="btn btn-primary">Login</button>
                <button onClick={this.signup} style={{ marginLeft: '25px' }} className="btn btn-success">Signup</button>
              </form>
            </div>
          </div>
        );
      }

Answer 2

change CSS & add height

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;  
}

https://jsfiddle.net/132y89rc/