移动端页面加载无法居中，滚动后自动恢复的HTML/CSS问题

问题现象 #

• 移动端加载页面时，包含标题、段落和按钮的section位置远低于页面中心
• 手动滚动后，section会自动跳转到预期的居中位置，体验不流畅
• 桌面浏览器中布局显示正常，仅移动端出现该问题

简化代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
</head>
<body>
    <section>
        <h1>Hello</h1>
        <p></p>
        <button></button>
    </section>
</body>
</html>

CSS #

html, body{
    padding: 0;
    margin: 0;
    background-color: black;
}
body{
    display: block;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
section{
    position: fixed;
    background-color: white;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

修复方案 #

1. 修正body的Flex布局配置 #

body设置了display: block，导致flex-direction、justify-content等Flex属性完全失效，同时需要确保根元素占满视口高度：

html, body{
    padding: 0;
    margin: 0;
    background-color: black;
    height: 100%; /* 让根元素占满视口高度 */
}
body{
    display: flex; /* 改为flex布局，激活Flex属性 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

2. 移除section的fixed定位并调整尺寸 #

fixed定位在移动端会受地址栏显示/隐藏的视口变化影响，且100vh + 100vw的设置会让section覆盖整个页面，无需固定定位。改为让section自适应内容，同时保持内部元素居中：

section{
    background-color: white;
    padding: 2rem; /* 增加内边距优化视觉体验 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center; /* 确保文本类元素居中 */
}

3. 优化移动端视口设置 #

添加viewport-fit=cover，避免刘海屏、状态栏等系统元素干扰布局：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

4. 适配移动端动态视口（可选） #

如果需要section占满整个视口，用100dvh（动态视口高度）替代100vh，适配移动端地址栏变化导致的视口高度波动：

section{
    position: relative;
    background-color: white;
    min-height: 100dvh; /* 动态适配视口高度 */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

完整修复代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Document</title>
    <style>
        html, body{
            padding: 0;
            margin: 0;
            background-color: black;
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        section{
            background-color: white;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    </style>
</head>
<body>
    <section>
        <h1>Hello</h1>
        <p>欢迎访问</p>
        <button>开始体验</button>
    </section>
</body>
</html>

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