html - html和css表单标签定位

我正在尝试创建一个表格来注册水平和垂直居中位置的用户。出于明显的原因，我有多个输入字段，后跟一个提交按钮。我还将页面分为三部分，分别是页眉，主体和页脚。

我似乎已经将其水平放置，但是无法垂直放置。

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

最佳答案

零钱和一个简单的补充：

浏览器对transform的支持非常好：
Caniuse: transform2d

关于html - html和css表单标签定位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36344600/