CSS问题求助：网页端调查问卷表单无法正常居中显示

表单居中修复方案 #

你当前的.container设置了width: 100%，块级元素默认会占满父元素的全部横向宽度，此时左右margin: auto没有多余的横向空间可供分配，居中自然无法生效。

水平居中实现（最常用需求）

仅需给.container新增最大宽度限制，修改后的CSS规则如下：

.container {
    width: 100%;
    max-width: 720px; /* 可根据你的设计需求调整这个数值，适配表单最佳阅读宽度 */
    margin: 3.125rem auto 0 auto;
}

修改后在视口宽度大于720px的设备上，容器会自动水平居中，小于720px时则占满全宽适配移动端。

水平+垂直居中实现

如果需要让表单在整个视口中同时水平、垂直居中，额外修改body的CSS规则即可：

body {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-white);
    margin: 0;
    min-height: 100vh; /* 让body高度至少占满整个视口 */
    display: flex;
    flex-direction: column;
    padding: 2rem 1rem; /* 避免小屏幕下内容贴边 */
}

同时调整.container的margin属性：

.container {
    width: 100%;
    max-width: 720px;
    margin: auto; /* 上下左右margin自动分配，实现双轴居中 */
}

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