绝对定位按钮需父容器设position: relative，否则left: 50%将相对于body计算；仅left: 50%; top: 50%仅锚点居中，须加transform: translate(-50%, -50%)实现真居中；负margin方案不响应式且易失准，transform性能更优且兼容IE9+；多transform声明须合并，顺序影响效果。
绝对定位按钮必须先设父容器 position: relative
不加这句，left: 50% 就会相对于 <body> 或视口计算，按钮直接飞到整页中心，而不是你想要的盒子内部。常见错误是只写子元素样式，忘了给直接父级加定位上下文。只要父容器没显式声明 position（默认 static），浏览器就会一路往上找，直到找到 <body>。临时调试时可以用 outline: 1px solid red 看父容器实际边界。
left: 50% 只移动左上角，不是居中
写了 left: 50%; top: 50% 后，按钮左上角落在父容器中心点，视觉上右下部分明显溢出——这不是居中，只是锚点对齐。必须补上 transform: translateX(-50%)（仅水平）或 transform: translate(-50%, -50%)（水平+垂直）。这个百分比是按按钮自身宽高算的，所以不用知道具体像素值，响应式友好。
别用 margin-left: -xxxpx 算偏移
负 margin 方案要求按钮宽高固定且可预知，一旦文字换行、字体加载延迟、缩放变化，偏移立刻失准。而 translateX(-50%) 不触发重排（reflow），性能更好，IE9+ 全支持。如果按钮宽度动态（比如内容由 JS 注入），负 margin 必须配 JS 获取 offsetWidth 再设置，多一层维护成本。
动画时 transform 声明必须合并写
后续要加旋转或缩放？不能分开写两个 transform，后写的会覆盖前一个。比如：transform: rotate(45deg); 会把前面的 translateX(-50%) 干掉。正确写法是：transform: rotate(45deg) translateX(-50%) 或 transform: translateX(-50%) rotate(45deg)。平移放最后更符合直觉，但顺序会影响最终视觉效果，建议在 DevTools 里实时试。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：父容器是否已有transform（比如用了 scale() 或 rotate()），它本身不会破坏定位参考系，但若启用了 transform-style: preserve-3d，可能改变层叠和坐标系行为——这种场景下，translateX(-50%) 的基准仍是你预期的自身尺寸，但视觉位置可能受父级 3D 变换干扰。 
