为何使用CSS无法让div在屏幕居中？求问题排查与修复指导

开发者阿泽

2026-7-4

问题分析与修复方案

你的代码已经实现了水平居中，但缺少垂直居中的关键设置，同时justify-content: center是Flex布局专属属性，当前容器未启用Flex，所以该属性完全无效。下面是具体修复步骤：

1. 让body占满整个视口高度

默认情况下body高度由内部内容撑开，必须让它占满屏幕高度，才能为内部容器提供垂直居中的基础：

body{
    background: url(/todolist/img/DSC05921-6.jpg) no-repeat center center/cover;
    margin:0;
    /* 添加以下三行 */
    min-height: 100vh;
    display: flex;
    align-items: center;
}

min-height: 100vh：强制body高度至少等于当前视口高度，确保垂直方向有足够空间
display: flex：启用Flex布局，激活align-items等Flex专属属性
align-items: center：让Flex容器内的子元素在垂直方向上居中

2. 调整content-container的冗余样式

原代码里的justify-content: center属于无效设置，直接移除；margin:auto可保留（父级Flex已实现水平居中，保留也不会冲突）：

.content-container{
    background: #FFFFFF;
    width:50%;
    margin:auto;
    text-align:center;
    /* 移除justify-content: center */
}

最终完整CSS代码

body{
    background: url(/todolist/img/DSC05921-6.jpg) no-repeat center center/cover;
    margin:0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.content-container{
    background: #FFFFFF;
    width:50%;
    margin:auto;
    text-align:center;
}