必须为带边框元素设置box-sizing: border-box，否则border会额外增加元素尺寸导致居中偏移、定位不准等问题；全局重置* { box-sizing: border-box; }最省事，但需注意第三方组件兼容性。
边框宽度会让元素实际尺寸变大，导致 margin: 0 auto 居中偏移、top: 50% 定位不准、Flex 布局内内容“看起来没居中”——根本不是代码写错了，是盒模型算错了。
box-sizing: border-box 必须加在带边框的元素上
默认 box-sizing: content-box 下，你设 width: 200px; border: 2px solid #000，元素总宽其实是 204px（200 + 2 + 2），但浏览器按 200px 算 margin 分配或 Flex 对齐基准，结果就偏了 4px。
- 所有带
border的块级元素（<div>、<code><table>、<code><img>包裹容器等）都该显式加box-sizing: border-box - 别只加在父容器，子元素如
<td> 或自定义卡片也得加，否则内部边框仍会撑开尺寸<li>全局重置更省事：<code>* { box-sizing: border-box; }，但注意它会影响所有元素，包括第三方组件的样式 - 必须给
<table> 加 <code>border-collapse: collapse，这是唯一能真正合并边框的属性 - 别只给
<td> 设边框，<code><th> 和 <code><table> 自身边框也要统一处理，否则表头和数据行视觉不一致<li>如果用了 <code>width: fit-content居中，记得border-collapse: collapse后表格宽度才真正反映内容尺寸，否则fit-content会把边框间距也算进去 - 这不是 bug，是预期行为：transform 作用于整个盒，边框是盒的一部分
- 若需像素级精准（比如模态框边框对齐视口），要么去掉边框，要么用
calc()补偿：transform: translate(calc(-50% - 2px), calc(-50% - 2px))（假设边框共 4px） - 更稳妥的做法是：先设
box-sizing: border-box，再用 transform —— 至少保证尺寸可预测，不会因 padding/border 混合导致意外膨胀
table 元素居中时边框导致错位的典型修复
<table> 默认用 <code>border-spacing，即使每个 <td> 都设了 <code>border: 1px，视觉边框也会变粗、位置浮动，margin: 0 auto 居中后左右不对称。
绝对定位 + transform 居中时边框引发的偏移
用 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 居中时，如果元素有边框，translate 是按元素**包含边框的整个盒尺寸**计算的，视觉中心点其实偏移了。
边框本身不“错”，错的是我们常默认它不占空间。只要 display 类型、盒模型、父容器布局方式三者对不上，边框就会变成偏差放大器。最省事的起点永远是 box-sizing: border-box + 显式宽度控制，其他方案都是在此基础上叠加。
