直接原因是根元素默认 margin/padding 未重置，导致居中时整体宽度超视口；常见于 body 默认 margin: 8px 使 width: 70% 实际超 100vw，或 flex 容器未约束宽度、absolute 元素溢出，需用 outline 快速定位越界元素。
直接原因不是居中本身，而是居中方式触发了滚动条——最常见的是 margin: 0 auto 配合固定宽度，在 body 有默认 margin 或容器未占满视口时，导致整体宽度超限。
为什么 margin: 0 auto 会意外触发滚动条？
浏览器默认给 body 设了 margin: 8px（各引擎略有差异），哪怕你写了 width: 70%，实际渲染宽度 = 70% + 左右各 8px，很容易超出 100vw。尤其在缩放、高 DPI 屏幕或移动端，这个偏差更明显。
- 用开发者工具检查
body的 computedmargin，大概率不是 0 -
width: 70%是相对于父容器（body）计算的，而body自身宽度已因 margin 超出视口 - 即使父容器设了
width: 100%，只要它没清除 margin，子元素照样“撑出去”
用 flex 居中但页面仍出现横向滚动条
常见于 display: flex; justify-content: center 的父容器，但子元素用了 position: absolute 或 width 超出 flex 容器边界，或者 flex 容器本身未约束宽度。
- 确保父容器明确设了
width: 100%或max-width: 100%，且无 padding/margin 溢出 - 避免子元素用
left: 50%; transform: translateX(-50%)时，其自身width过大导致溢出 - 如果父容器是
html或body，必须先清掉它们的默认 margin 和 padding
如何验证和快速定位溢出源？
别靠肉眼猜，用控制台一行命令直接暴露所有越界元素：
* { outline: 2px solid red !important; }
执行后，红色边框会包住所有元素。横向滚动条出现时，必然有某个元素的右边缘明显超出视口右侧——通常就是那个没清 margin 的 body，或写死 width: 1200px 的卡片容器。
- 若整个页面被红框包住但没溢出，说明是
html或body的 margin/padding 在作祟 - 若只有某个区域被红框撑出右侧，就聚焦该区域的 CSS，重点查
width、padding、border和box-sizing - 注意
box-sizing: content-box（默认）下，width: 100%+padding: 10px= 实际宽度 > 100%
真正容易被忽略的点：不是居中代码写错了，而是根元素（html 和 body）的默认样式没被重置，且这个影响在桌面端不明显，一到移动端缩放或高分屏就立刻暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
