Ein Formularelement mit Flexbox zentrieren

Question

Ich habe viel Inhalt auf meiner Seite, zusammen mit einem Formular, das anzeigt, wenn ein Benutzer auf die Schaltfläche klickt. Ich kann das Formular Zentrum Flexbox mit etwa so:

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

Dieses Formular zentriert, aber das Problem mit diesem Ansatz ist es für den Rest meines Inhalts nach unten drückt, die optisch nicht ansprechend ist. Ich habe versucht, eine z-index von 999 hinzuzufügen, aber das funktioniert nicht. Ich benutzte auch position:absolute, aber das stapelt nur das Formular oben links.

Gibt es eine einfache Möglichkeit, das Formular in der Mitte der Seite zu platzieren, während der Rest des Inhalts so bleibt? Mir geht es gut, dass das Formular den Rest des Inhalts überlagert.

Update 1 Auf Wunsch hier ist der entsprechende 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 ist eine Komponente reagieren, die in der index Seite wird wie folgt verwendet:

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** 

Die relevanten css-Klassen:

.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

Versuchen Sie folgendes:

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

Weitere Informationen zu dieser Zentrierung Methode siehe: Element will not stay centered, especially when re-sizing screen