如何让表单在平板及更大屏幕中居中？（附代码求助）

问题根源 #

当前代码存在两个关键问题导致表单无法居中：

• 父容器#signup未设置足够高度，也未启用Flex布局，align-content:center属性完全不起作用
• 绝对定位的#signup-form仅设置了left:50%，但未抵消自身宽度的偏移，导致表单左边缘居中而非整体居中

修改方案 #

在平板及以上屏幕的媒体查询（min-width:768px）中，替换原有的Sign up相关样式为以下代码：

/*Sign up*/
#signup {
    min-height: calc(100vh - 75px); /* 减去header高度，占满屏幕剩余空间 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0; /* 添加上下内边距，避免表单贴边 */
}

#signup-form {
    color: #ffffff;
    background-color:#252525;
    padding: 30px;
    width: 100%;
    max-width: 500px; /* 限制表单最大宽度，避免大屏过宽 */
}

.form-input:hover {
    border-color: #4d4d4d;
}

.join-button:hover {
    background-color: #3f3f3f;
    color: #fafafa;
}

代码说明 #

• #signup设置为Flex容器，justify-content:center和align-items:center分别实现水平和垂直居中
• min-height: calc(100vh - 75px)确保容器占满屏幕剩余高度（75px是header在平板以上的固定高度）
• #signup-form添加max-width限制宽度，同时width:100%保证小屏自适应
• 移除原有的绝对定位，改用Flex布局更简单可靠，降低新手维护成本

额外修复 #

你的HTML代码里出生日期输入框后有一个多余的</div>标签，建议删除，避免页面结构错误。

内容的提问来源于stack exchange，提问作者Ben Barker