Centering a form element with flexbox - html

Question

I have lots of content on my page, along with a form that shows when a user clicks the button. I can center the form using flexbox like so:
.container-column {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
This centers the form, but the problem with this approach is it pushes the rest of my content down, which is visually unappealing. I tried to add a z-index of 999 but this doesn't work. I also used position:absolute but this just stacks the form on top left.
Is there a simple way to place the form in the middle of the page, while leaving the rest of the content as is? I am ok with the form overlaying the rest of the content.
Update 1 Upon request, here is the relevant code:
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 is a react component which is used in the index page as follows:
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**
The relevant css classes:
.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%;
}

Answer 1

Try this:
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;
}
For details about this centering method see: Element will not stay centered, especially when re-sizing screen