html und css Formular Tag Positionierung

Question

Ich versuche, ein Formular für die Registrierung von Benutzern mit einer zentrierten horizontalen und vertikalen Position zu erstellen. Ich habe mehrere Eingabefelder aus offensichtlichen Gründen gefolgt von einem Absenden-Button. Ich habe auch die Seite in 3 Abschnitte unterteilt, eine Kopfzeile, einen Hauptteil und eine Fußzeile.

Ich schien es horizontal zu bekommen, aber ich kann es vertikal nicht herausfinden.

<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

Kleine Änderung und eine einfache Addition:

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

Browswer Unterstützung für transform ist ganz nett:

Caniuse: transform2d

Answer 2

Wollte Sie das Formular selbst zentriert oder die Elemente innerhalb des Formulars zentriert? Ich nehme an, Sie fragen nach dem ersten. In diesem Fall folgende Änderungen vornehmen:

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

Auf #registration benötigen Sie margin und nicht margin-top zu verwenden. Sie können dann flexbox verwenden, um das Formular vertikal zu zentrieren.