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

您是希望表单本身居中，还是表单中的元素居中？我以为你要的是前者。在这种情况下进行以下更改：

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

在 #registration 上，您需要使用 margin 而不是 margin-top。然后，您可以使用 flexbox 使表格垂直居中。

Answer 2

小改动和简单添加：

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

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

Caniuse: transform2d

html和css表格标签定位

html and css form tag positioning

html

css

positioning