答案是：浏览器按元素实际渲染占位尺寸（width+padding+border）计算居中，而非仅width值；box-sizing: border-box可使声明宽度等于实际占位宽度，避免偏差。
带边框和内边距的元素居中，真正卡住人的不是“怎么居中”，而是**居中依据的尺寸到底是多少**——你用 margin: auto 或 transform: translate(-50%, -50%) 时，浏览器拿什么值去算？答案是：它按实际渲染占位来算，而这个占位很可能比你写的 width 大一截。
元素实际宽度怎么算（content-box 默认下）
默认 box-sizing: content-box 时，元素实际占位宽度 = width + padding-left + padding-right + border-left-width + border-right-width。高度同理。
- 写
width: 300px; padding: 20px; border: 3px solid #000;→ 实际宽 = 300 + 20×2 + 3×2 = 346px - 如果父容器刚好
width: 346px，那子元素设margin: 0 auto才能真居中；设成margin: 0 auto却没居中？八成是父容器太窄，或你误以为子元素就占 300px -
border-style: none时，哪怕写了border-width: 10px，也不参与计算 —— 这个细节常被忽略，导致临时删边框后布局错乱
用 box-sizing: border-box 简化计算
把边框和内边距“塞进”你声明的 width 里，让声明值等于实际占位值，这是最直接的解法。
- 加一句
box-sizing: border-box;（建议全局重置：* { box-sizing: border-box; }） - 此时
width: 300px; padding: 20px; border: 3px solid #000;→ 实际宽就是 300px，内容区自动压缩为 300 − 40 − 6 = 254px - 注意：
box-sizing对table元素无效，对某些 CSS 动画属性（如transform原点）也无影响，别指望它“万能”
居中时容易被忽略的两个坑
居中行为本身依赖尺寸，但尺寸之外还有两个隐形变量：
立即学习“前端免费学习笔记（深入）”；
-
display类型：inline元素无视width/height，加了padding和border会撑开行高，但margin: auto无效 —— 必须先转成inline-block或block - 父容器是否设置了
text-align: center：这对inline和inline-block子元素有效，但和margin: auto机制无关，混用容易误判原因 - 使用
transform: translate(-50%, -50%)居中时，基准点是元素自身的左上角，而它的“自身尺寸”仍是上面算出的实际占位尺寸 —— 不是width值，也不是offsetWidth（后者含边框但不含外边距）
真正要盯住的，从来不是“怎么写居中代码”，而是打开开发者工具，看 Computed 面板里的 width 和 offsetWidth 是否一致 —— 不一致，说明你还没搞清盒模型当前生效的是哪一套。
