如何在移动端和桌面端正确居中div？现有布局问题求助

问题根源分析 #

• 移动端无法垂直居中：仅给body设置height:100%但未同步设置html的高度，且没有配置垂直居中的布局规则，导致容器无法垂直对齐。
• 桌面端出现滚动条：body默认存在margin，设置100vh后，加上container的margin/padding会触发内容溢出，同时重复设置margin: auto和margin:1.1em也会导致样式冲突。

修正后的代码 #

HTML（结构无需修改）

<div class="hero">
    <div class="container">
    </div>
</div>
</body>

CSS

/* 全局清零默认边距，避免布局偏移 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: hsl(212, 45%, 89%);
}

.hero {
    /* 用flex实现全局居中，兼容移动端和桌面端 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1.1em; /* 替代container的margin，避免溢出 */
}

.container {
    background-color: white;
    padding: 1em;
    border-radius: 1em;
    width: 100%;
    max-width: 45%; /* 桌面端限制宽度，移动端自动占满 */
}

关键说明 #

1. 全局样式清零：html和body的默认margin/padding会干扰布局，必须先清零，同时给html也设置height:100%，确保body能正确继承高度。
2. 统一居中方案：用.hero容器包裹，通过flex布局的justify-content: center和align-items: center实现垂直水平双居中，min-height:100vh保证在内容不足时撑满视口，内容过长时自动延伸，避免滚动条异常。
3. 容器间距处理：把移动端的margin移到.hero的padding上，避免container的边距导致视口溢出；桌面端通过max-width限制宽度，无需媒体查询单独设置，实现响应式适配。

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