div容器内元素无法居中：PC端正常移动端失效问题求助

问题原因 #

• 缺失移动端视口适配的meta标签，移动端浏览器会默认按PC端宽度渲染页面，导致宽度适配失效，居中错位
• CSS中使用了justify-content: center但未开启弹性布局（未设置display: flex），该属性不生效
• 未设置盒模型规则，width: 100% + padding: 20px会导致容器实际宽度超出视口，出现横向滚动条
• HTML代码存在多余的</div>闭合标签，部分移动端浏览器解析DOM结构时会出现异常

解决步骤 #

1. 在HTML的<head>标签内添加视口适配配置
2. 修正.page_content的CSS规则，使用flex布局实现稳定的水平+垂直居中，添加盒模型配置
3. 删除HTML中多余的闭合标签，同时清除body的默认边距避免干扰

修正后代码 #

HTML 代码

<head>
  <!-- 新增移动端视口配置 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body style="color: #efefef; margin: 0; padding: 0;">
  <div class="page_content">
    <h1>Home page</h1>
    <button class="button" onclick="testFunction()">Example</button>
    <h1>Buttons</h1>
    <button class="button" onclick="testFunction1()">btn 1</button>
    <br>
    <br>
    <button class="button" onclick="testFunction2()">btn 2</button>
  </div>
</body>

CSS 代码

.page_content {
  background: linear-gradient(90deg, rgba(94, 182, 86, 1) 48%, rgba(121, 230, 111, 1) 100%);
  padding: 20px;
  box-sizing: border-box; /* 新增：padding不会撑大容器宽度 */
  width: 100vw;
  height: 100vh;
  /* 新增flex布局配置，实现子元素水平垂直居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  position: fixed;
}

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