移动端网页内容无法居中问题求助（附代码）

核心问题分析 #

页面向右拉伸的根源在于两点：

• 老旧的<center>标签在内容超出屏幕宽度时，无法正确处理横向溢出；
• 图片设置了固定的width="1000"属性，当设备屏幕宽度小于1000px时，图片不会自动缩放，直接撑大页面。

修正后的代码 #

CSS 部分

body {
  background: url("fireworkplusothers-20.jpg");
  color: black;
  /* 用 flex 实现页面内容垂直+水平居中，替代<center>标签 */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 1rem;
  box-sizing: border-box;
}

/* 链接样式保留 */
a:link { color: white; }
a:visited { color: grey; }
a:hover { color: grey; }
a:active { color: white; }

/* 图片响应式处理 */
img.center {
  max-width: 100%;
  height: auto; /* 保持图片原始比例 */
}

/* 导航文字样式提取到 CSS，避免内联样式 */
.nav-text {
  text-align: center;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

HTML 部分

<p class="nav-text">
  <a href="photo.html">+</a> &nbsp; 
  <a href="tooth.html">+</a> &nbsp; 
  <a href="perfect.html">+</a> &nbsp; 
  <a href="nn1.html">+</a> &nbsp; 
  <a href="nn1.html">+</a> &nbsp; 
  <a href="about.html">+</a>
</p>

<img src="SP_ribcage.png" alt="idk" class="center">

关键修改说明 #

• 用display: flex给 body 设置居中布局，比<center>标签更稳定，适配各种屏幕尺寸；
• 图片添加max-width: 100%和height: auto，确保图片不会超出容器宽度，自动适配屏幕；
• 移除内联样式，统一用 CSS 管理，便于后续维护；
• 给 body 添加box-sizing: border-box，让 padding 不会额外增加页面宽度。

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