html - React中的居中对齐组件(垂直和水平)

我在React中使用引导程序。

下面是我的渲染函数，我正在尝试使表单居中对齐。

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>


    );
}

center的样式如下：

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

但是，结果如下。它在左上角说。我认为这是这样做的方式。

编辑

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;
}

最佳答案

更改CSS并添加height

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

https://jsfiddle.net/132y89rc/