使用CSS将表单放置在页面居中位置失败求解决方法

问题原因 #

• 你为.form设置的justify-content: center属性仅对display: flex/display: grid类型的容器生效，当前.form为inline-block类型，该属性不生效
• 你没有为父容器body设置占满视口的高度，即使配置了居中属性，也无法实现「在整个页面范围内居中」的效果

修复方案 #

方案1（推荐）：Flex全局居中

适配你当前的HTML结构，让标题和表单整体在页面垂直+水平居中，不会出现元素重叠问题：

body{
    background-color: #d90429;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* 新增以下规则 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form{
    /* 删除原有的display: inline-block、justify-content规则，按需添加边距即可 */
    margin-top: 20px;
}

方案2：单独居中表单

如果只需要把表单单独固定在页面中心，可使用绝对定位实现：

.form{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

内容的提问来源于stack exchange，提问作者Logesh R.