html - 使用flexbox将表单元素居中

我的页面上有很多内容，还有一个表格，显示用户单击按钮时的形式。我可以使用flexbox将表单居中，如下所示：

.container-column {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

这使表单居中，但是这种方法的问题在于它将其他内容压低了，这在视觉上并不吸引人。我试图添加999的z-index，但这不起作用。我还使用了position:absolute，但这只是将表格堆叠在左上方。

是否有一种简单的方法将表单放置在页面的中间，而其余内容保持原样？我可以将表格覆盖其余内容。

更新1根据要求，以下是相关代码：

Form：

return (
            <form className="container-column">
                <div className="icon ion-ios-close-empty close-btn" onClick={() => this.props.signupBtnClick('close')}></div>
                <input type="text" name="firstname" placeholder="firstname" className="form-element"></input>
                <input type="text" name="lastname" placeholder="lastname" className="form-element"></input>
                <input type="text" name="username" placeholder="username" className="form-element"></input>
                <input type="password" placeholder="password" className="form-element"></input>
                <input type="password" placeholder="repeat password" className="form-element"></input>
                <input type="email" name="email" placeholder="email" className="form-element"></input>
                <input type="submit" value="submit" className="form-element btn-form2"></input>
            </form>
        )

Form是react组件，在index页面中使用的方式如下：

return (
            <div>
                <section className="section-header">
                    <div className="container-row signup-login-btns">
                        <button className="btn btn-form1" onClick={() => this.renderLoginForm()}>Login</button>
                        <button className="btn btn-form2" onClick={() => this.renderSignupForm()}>Signup</button>
                    </div>
                    {this.state.showSignupForm ? <SignupForm signupBtnClick={(type) => this.onSignupClick(type)} />: null }
   **other content, which gets pushed down once the form is shown**

相关的CSS类：

.form-element {
  border:none;
  align-content:center;
  text-align:center;
  outline:none;
  width: 400px;
  height: 45px;
  margin: 10px;
  color: #7f8c8d;
  font-size:120%;
  border-radius:10px;
}

.section-header {
    background: #d53369;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #d53369, #cbad6d);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #d53369, #cbad6d);
  margin-top:0px;
  padding-top:0px;
  padding-bottom:5%;

}

最佳答案

尝试这个：

body {
     position: relative;
}

.container-column {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);

     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
     align-items: center;
}

有关此居中方法的详细信息，请参见：Element will not stay centered, especially when re-sizing screen

关于html - 使用flexbox将表单元素居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38360661/