title: Centering a form element with flexbox
body: <p>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: </p>
  
  <pre><code>.container-column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; 
    align-items: center;
  }
  </code></pre>
  
  <p>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 <code>z-index</code> of 999 but this doesn't work. I also used <code>position:absolute</code> but this just stacks the form on top left. </p>
  
  <p>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. </p>
  
  <p><strong>Update 1</strong> Upon request, here is the relevant code: </p>
  
  <p><code>Form</code>: </p>
  
  <pre><code>return (
              &lt;form className="container-column"&gt;
                  &lt;div className="icon ion-ios-close-empty close-btn" onClick={() =&gt; this.props.signupBtnClick('close')}&gt;&lt;/div&gt;
                  &lt;input type="text" name="firstname" placeholder="firstname" className="form-element"&gt;&lt;/input&gt;
                  &lt;input type="text" name="lastname" placeholder="lastname" className="form-element"&gt;&lt;/input&gt;
                  &lt;input type="text" name="username" placeholder="username" className="form-element"&gt;&lt;/input&gt;
                  &lt;input type="password" placeholder="password" className="form-element"&gt;&lt;/input&gt;
                  &lt;input type="password" placeholder="repeat password" className="form-element"&gt;&lt;/input&gt;
                  &lt;input type="email" name="email" placeholder="email" className="form-element"&gt;&lt;/input&gt;
                  &lt;input type="submit" value="submit" className="form-element btn-form2"&gt;&lt;/input&gt;
              &lt;/form&gt;
          )
  </code></pre>
  
  <p><code>Form</code> is a react component which is used in the <code>index</code> page as follows:</p>
  
  <pre><code>return (
              &lt;div&gt;
                  &lt;section className="section-header"&gt;
                      &lt;div className="container-row signup-login-btns"&gt;
                          &lt;button className="btn btn-form1" onClick={() =&gt; this.renderLoginForm()}&gt;Login&lt;/button&gt;
                          &lt;button className="btn btn-form2" onClick={() =&gt; this.renderSignupForm()}&gt;Signup&lt;/button&gt;
                      &lt;/div&gt;
                      {this.state.showSignupForm ? &lt;SignupForm signupBtnClick={(type) =&gt; this.onSignupClick(type)} /&gt;: null }
     **other content, which gets pushed down once the form is shown** 
  </code></pre>
  
  <p>The relevant css classes: </p>
  
  <pre><code>.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%;
  
  }
  </code></pre>