htmlとcssフォームタグの配置

Question

私は、中央に水平と垂直の位置にユーザーを登録するためのフォームを作成しようとしています。私は明白な理由のために複数の入力フィールドがあり、その後に送信ボタンが続きます。また、ページを3つのセクション、ヘッダー、本体、フッターに分けています。

私はそれを水平にしたように見えましたが、垂直に見分けることはできません。

<div id="main-background"> 
     <div id="main"> 
      <form name="registration" id="registration"> 
       <input id="first-name" type="text" name="first-name" placeholder="First Name" size="15"> 
       <input id="last-name" type="text" name="last-name" placeholder="Last Name" size="15"> 
       <input id="date-of-birth" type="text" name="date-of-birth" placeholder="Date of Birth" size="15"> 
       <input id="email" type="text" name="email" placeholder="Email" size="15"> 
       <input id="username" type="text" name="username" placeholder="Username" size="15"> 
       <input id="password" type="password" name="password" placeholder="Password" size="15"> 
       <input id="submit" type="submit" value="Submit" onclick="submit()"> 
      </form> 
     </div><!-- main --> 
    </div><!-- end of main-background --> 

#main { 
    background-color: #d9d9d9; 
    font-size: 1.6em; 
    margin: 0 auto; 
    height: 800px; 
    padding: 0 auto; 
    position: relative; 
    width: 990px; 
} 

#registration { 
    border: 1px solid black; 
    width: 50%; 
    margin-top: 0 auto; 
} 

#first-name { 
    border-color:#cccccc; 
    border-style:solid; 
    display: block; 
    margin: 5px; 
    padding: 0 auto; 
    font-size:14px; 
    text-align: center; 
    border-width:1px; 
    border-radius:5px; 
} 

#last-name { 
    border-color:#cccccc; 
    border-style:solid; 
    display: block; 
    margin: 5px; 
    padding: 0 auto; 
    font-size:14px; 
    text-align: center; 
    border-width:1px; 
    border-radius:5px; 
} 

#date-of-birth { 
    border-color:#cccccc; 
    border-style:solid; 
    display: block; 
    margin: 5px; 
    padding: 0 auto; 
    font-size:14px; 
    text-align: center; 
    border-width:1px; 
    border-radius:5px; 
} 

#email { 
    border-color:#cccccc; 
    border-style:solid; 
    display: block; 
    margin: 5px; 
    padding: 0 auto; 
    font-size:14px; 
    text-align: center; 
    border-width:1px; 
    border-radius:5px; 
} 

#username { 
    border-color:#cccccc; 
    border-style:solid; 
    display: block; 
    margin: 5px; 
    padding: 0 auto; 
    font-size:14px; 
    text-align: center; 
    border-width:1px; 
    border-radius:5px; 
} 

#password { 
    border-color:#cccccc; 
    border-style:solid; 
    display: block; 
    margin: 5px; 
    padding: 0 auto; 
    font-size:14px; 
    text-align: center; 
    border-width:1px; 
    border-radius:5px; 
} 

Answer 1

小さな変化と単純に加算：

#registration { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    border: 1px solid black; 
    width: 50%; 
    margin: 0 auto; // removed margin-top 
} 

transformためのブラウザ専用のサポートは非​​常にいいです：

Caniuse: transform2d

Answer 2

フォーム自体を中央揃えにするか、フォーム内の要素を中央揃えにしますか？私はあなたが前者を求めていると思った。 #registrationで

#main { 
    background-color: #d9d9d9; 
    font-size: 1.6em; 
    margin: 0 auto; 
    height: 800px; 
    padding: 0 auto; 
    position: relative; 
    width: 990px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

#registration { 
    border: 1px solid black; 
    width: 50%; 
    margin: 0 auto; 
} 

あなたがmarginなくmargin-topを使用する必要があります。その場合は、以下の変更を行います。 flexboxを使用して、フォームを垂直方向に中央揃えにすることができます。