因为 ul 默认 padding-left: 40px 导致整个列表右移，视觉上居中项偏左；需重置 ul { padding: 0; margin: 0; } 才能真正居中。
为什么 margin: 0 auto 居中却偏左？先查默认边距
绝大多数“居中偏移”问题，根源不在你写的居中代码，而在浏览器给 body、ul、h1 这类元素悄悄加的默认 margin 或 padding。比如 ul 默认有 padding-left: 40px，你给它子项设 margin: 0 auto，结果整个列表往右挤了 40px，看起来像居中失败。
- 用浏览器开发者工具（F12）选中目标元素，看
Computed面板里margin和padding的实际值，尤其注意父级和祖父级 - 常见“捣乱者”：
body（默认margin: 8px）、ul/ol（默认padding-left）、h1–h6（默认上下margin） - 清零不是只清目标元素，而是从根往下理：先清
body，再清容器，最后清目标
* { margin: 0; padding: 0; } 要不要全局写？
能快速抹平差异，但副作用明显：表单控件（input、button）失去默认间距，textarea 内边距消失导致文字贴边，甚至某些 UI 库样式被意外覆盖。它适合原型或小项目速搭，不适合生产环境。
- 更稳妥的做法是局部重置：
body { margin: 0; }+ul, ol { padding: 0; margin: 0; }+h1, h2, h3 { margin: 0; } - 如果用 CSS Reset 库（如 Normalize.css），它比暴力清零更智能，保留合理默认值，推荐在新项目中引入
- 千万别在已有项目里突然加全局清零——你会看到所有按钮堆在一起、文字紧贴边缘，排查成本远高于预防
父容器内边距导致子元素视觉偏移怎么调？
即使子元素本身居中了，父容器的 padding 也会让它的“视觉中心”和父容器的几何中心错开。比如父 div 设了 padding: 20px，你给子 div 写 margin: 0 auto，那子元素确实水平居中了，但整体离顶部有 20px 空隙，看起来像“往下掉了一截”。
- 确认是否真需要父容器内边距：有时用
margin替代padding更可控（margin不影响子元素定位上下文） - 若必须用
padding，且要严格对齐父容器中心，可对子元素加负边距补偿：margin: -20px auto 0;（前提是知道具体数值） - Flex 布局下更简单：父容器设
display: flex; justify-content: center; align-items: center;，padding不会干扰居中逻辑，因为它是作用于容器自身，不影响 flex item 的对齐计算
ul/li 列表居中偏移的典型修复
ul 的默认 padding-left 是最常被忽略的偏移源。你给 li 单独设 margin: 0 auto 没用，因为整个 ul 本身就被左推了 40px。
- 第一步永远是重置
ul：ul { padding: 0; margin: 0; } - 第二步再处理
li：若需水平居中单个li，确保它是块级（display: block）并设宽度，再用margin: 0 auto - 更现代的解法是直接用 Flex：
ul { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0; }，li自动水平居中，且无需设宽 - 注意：老版 Safari 对
gap支持差，若用flex-direction: row; gap: 8px;替代margin控制间距，记得加-webkit-gap前缀
真正卡住人的往往不是居中逻辑本身，而是默认样式在暗处悄悄移动了参考系。每次觉得“明明写对了却偏了”，先按 Ctrl+Shift+I 打开开发者工具，盯着 Computed 里的 margin 和 padding 看三秒——90% 的偏移问题，答案就在那里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
