右边空白是页面被撑宽导致的溢出，而非居中逻辑错误；需检查body/html的min-width/width过大、子元素超出父容器（如nowrap文本、box-sizing问题）、overflow-x被覆盖及嵌套元素计算溢出。
右边多出空白，不是居中逻辑错了，而是页面整体被撑宽了——浏览器被迫加了水平滚动条，你看到的“右边空白”其实是视口外溢出的内容。
检查 body 或 html 的 min-width / width 是否过大
常见但容易被忽略：有人为 body 设了 min-width: 1120px 或 width: 1200px，而手机或窄屏下视口宽度远小于此，直接导致右侧溢出。哪怕内容本身居中，父容器硬性设宽也会撑开整个文档流。
- 打开开发者工具，选中
body和html元素，在 “Computed” 面板里搜min-width、width、max-width - 临时禁用这些值，看右边空白是否消失
- 若确认是它导致的，改用响应式写法：
min-width: fit-content不推荐；更稳妥的是移除固定宽，靠max-width+margin: 0 auto控制容器尺寸
排查子元素是否超出父容器宽度
一个看似居中的 div，如果内部有 white-space: nowrap 的长文本、未设置 box-sizing: border-box 的带 padding/border 元素、或用了 width: 100vw（含滚动条宽度），都可能悄悄突破父级边界。
- 在 Elements 面板中逐个折叠子节点，观察右边空白何时消失
- 重点关注：
textarea、pre、table、绝对定位元素、flex 容器里的未约束子项 - 对可疑元素临时加
outline: 2px solid red，看是否真超出视口右边缘 - 检查
box-sizing：若父容器设了width: 100%，但子元素用了padding: 20px且box-sizing: content-box（默认），实际宽度 = 100% + 40px → 溢出
验证 overflow-x 是否被意外覆盖
很多人加了 html, body { overflow-x: hidden } 就以为万事大吉，但这个规则极易被后续 CSS 覆盖，尤其在引入第三方库或重置样式后。
立即学习“前端免费学习笔记（深入）”；
- 在 “Computed” 面板查
html和body的最终overflow-x值，确认是hidden而非visible或auto - 注意：只设
overflow: hidden会同时隐藏 x/y 方向，但若其他地方写了overflow-y: scroll，可能覆盖掉 x 方向的设置 - 更安全的写法是显式声明：
html, body { overflow-x: hidden; overflow-y: visible; }
真正难排查的，往往是嵌套多层后某个子元素的 width 计算结果超出了预期——比如 flex 容器里一个 img 没设 max-width: 100%，在响应式断点切换时突然撑爆父级。这类问题必须靠逐层 inspect + outline 辅助视觉定位，不能只盯居中代码本身。
