CSS实现居中垂直竖线导致页面宽度溢出出现横向滚动条如何解决

问题原因 #

你使用相对定位（position: relative）设置竖线left: 50%的实现方式存在布局缺陷：相对定位的元素仅发生视觉偏移，本身仍会在文档流的原始位置占据空间，偏移后元素右侧超出父容器宽度，最终撑大页面整体宽度触发横向滚动条。

解决方案 #

方案一：全局背景渐变实现（最优，无需额外DOM元素）

不需要单独写竖线DOM，直接通过body的背景样式实现全页贯穿的居中竖线，完全不会影响页面布局：

1. 删除所有HTML中的.vertical_line元素，以及对应的CSS规则
2. 修改body的CSS规则如下：

body {
  background-color: lightblue;
  /* 6px宽黑色居中竖线，和你原需求的边框宽度一致 */
  background-image: linear-gradient(90deg, transparent calc(50% - 3px), #000 calc(50% - 3px), #000 calc(50% + 3px), transparent calc(50% + 3px));
}

方案二：保留原有DOM结构的修复方法

如果需要保留现有的.vertical_line元素，修改对应CSS即可：

.vertical_line {
  border-left: 6px solid black;
  height: 500px;
  /* 改为绝对定位脱离文档流，不再占用页面宽度 */
  position: absolute;
  left: 50%;
  z-index: -1;
}
/* 给竖线的父容器添加相对定位，让竖线相对于父容器居中 */
.section-2, body {
  position: relative;
}
/* 额外修复你代码里的属性缺失问题：top属性需要加单位 */
.section-3 {
  position: relative;
  top: 50px;
  width: 500px;
  height: 60%;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: green;
}

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