如何让单词游戏容器适配视口并居中？CSS定位问题求助

你的容器出现偏移滑动的核心问题是使用了固定定位（position: fixed）+ 硬编码的left: 400px：

• 固定定位会让容器脱离文档流，left: 400px强制容器距离视口左侧400px，当视口宽度小于「容器宽度+400px」时，容器会被挤出可视区域，出现横向滚动。
• 你尝试的align-content: center需要配合display: flex或display: grid才生效，但当前wrapper未设置对应display属性，所以完全不起作用。

改用弹性布局（Flexbox）让容器自动水平居中，移除固定定位的硬编码值，确保视口变化时容器始终居中且自适应宽度：

修改后的CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* 新增：让padding不额外增加元素总宽度 */
}

body{
  margin: 0;
  padding: 0;
  font-family: 'Figtree', 'Inter', 'Montserrat', sans-serif; /* 合并重复字体声明 */
  background: #212529;
  display: flex; /* 新增：开启弹性布局 */
  justify-content: center; /* 新增：水平方向居中所有子元素 */
  min-height: 100vh; /* 新增：确保body占满视口高度，避免内容过短时布局异常 */
}

.wrapper{
  margin-top: 120px; /* 保留顶部间距 */
  padding: 0 80px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.5);
  max-width: 500px; /* 最大宽度限制 */
  width: 100%; /* 新增：小视口下自适应宽度，不超过max-width */
}

/* 新增：让输入框布局更稳定，适配容器宽度 */
.inputs {
  display: flex;
  gap: 8px; /* 输入框之间的间距 */
  margin-top: 16px;
}

.inputs input {
  flex: 1; /* 每个输入框平分容器宽度 */
  padding: 8px;
  text-align: center;
  font-size: 1.2rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

关键修改点说明 #

1. body开启Flexbox：通过display: flex + justify-content: center，让wrapper自动水平居中，无需硬编码left值，视口缩小后自动调整位置。
2. 移除固定定位和硬编码left：固定定位在此场景下完全没必要，反而会破坏自适应居中逻辑。
3. 给wrapper添加width: 100%：确保容器在视口宽度小于500px时自动缩小适配，同时保留max-width限制最大宽度。
4. 添加box-sizing: border-box：避免元素的padding额外增加总宽度，防止容器因padding溢出视口。
5. 优化输入框布局：用Flexbox让输入框平分容器宽度，容器缩小时输入框也能自适应，保持布局稳定。

修改后，容器会像Wordle一样，在任何视口宽度下都保持水平居中，且自适应缩小，不会出现偏移滑动问题。

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