居中HTML内容溢出页面时出现额外缩进的解决方法

问题分析 #

当页面出现垂直滚动条后，视口宽度会被滚动条占用，导致原本水平居中的容器视觉上出现偏移；同时浏览器默认的html/body边距也会放大这种偏移感，让你误以为是“额外缩进”。你之前给.center设置overflow:auto无效，是因为没有给容器设置固定高度或最大高度，容器会被内容完全撑开，无法触发滚动逻辑。

解决方案 #

方案1：强制显示垂直滚动条，避免宽度波动 #

让页面始终显示垂直滚动条，确保视口宽度保持一致，居中元素不会因滚动条出现而偏移：

/* 强制显示垂直滚动条 */
html {
  overflow-y: scroll;
}

/* 清除页面默认边距 */
html, body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
}

.center {
  width: 600px;
  max-width: 600px;
  border: 1px solid rgb(0, 0, 0); /* 简化border写法 */
}

方案2：让内容在居中容器内部滚动 #

如果希望页面不出现滚动条，而是将滚动限制在.center容器内，需要给容器设置最大高度并开启内部滚动：

/* 清除页面默认边距 */
html, body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  min-height: 100vh; /* 让容器占满视口高度 */
}

.center {
  width: 600px;
  max-width: 600px;
  border: 1px solid rgb(0, 0, 0);
  max-height: 100vh; /* 限制容器最大高度为视口高度 */
  overflow-y: auto; /* 内容超出时显示内部滚动条 */
  box-sizing: border-box; /* 避免border撑开容器宽度 */
}

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