フレックスボックスでフォーム要素を中心にする

Question

私は自分のページに多くのコンテンツを持ち、ユーザーがボタンをクリックしたときの様子を示しています。私はそうのようなフレキシボックスを使用してフォームをセンタリングすることができます

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

これは、フォームを中心ますが、このアプローチの問題は、それが視覚的に魅力のないである、ダウン私のコンテンツの残りの部分をプッシュしています。私はz-indexの999を追加しようとしましたが、これはうまくいきません。私もposition:absoluteを使用しましたが、これはちょうど左上のフォームを積み重ねます。

フォームの残りの部分をそのまま残して、ページの中央にフォームを配置する簡単な方法はありますか？私はフォームの残りのコンテンツを重ねて大丈夫です。

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は、以下のようにindexページで使用される反応成分である：

更新要求に応じて1は、ここに関連するコードである

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

} 

Answer 1

これを試してみてください：このセンタリング方法の詳細については

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