绝对定位+transform居中原理是先用top/left:50%将元素左上角移至父容器中心，再用translate(-50%,-50%)反向偏移自身宽高一半，使视觉中心对齐；需父容器有高度和relative定位，且子元素不能为inline。
绝对定位 + transform: translate(-50%, -50%) 为什么能居中
它不是靠猜位置，而是靠“先拉到左上角，再往回退一半”。position: absolute 把元素从文档流拎出来，top: 50% 和 left: 50% 让它的左上角落到父容器中心；transform: translate(-50%, -50%) 再让这个左上角反向偏移自身宽高的一半——结果就是元素视觉中心对齐父容器中心。
必须设置 top/left 才生效，光写 transform 不行
常见错误是只加 transform: translate(-50%, -50%)，但没配 top 和 left。此时元素还在默认流位置，translate 只是原地平移，根本不会移动到父容器中央。
- 父容器需有明确高度（比如
height: 300px或min-height），否则top: 50%算不出具体像素值 - 父容器要设
position: relative（或absolute/fixed），否则top/left会相对于最近定位祖先，甚至body - 子元素不能是
display: inline，否则width/height为 0，translate(-50%, -50%)的效果不可控
flex 替代方案更简单，但老浏览器不支持
如果只需现代浏览器（Chrome 29+、Firefox 20+、Safari 6.1+），直接用 display: flex + justify-content: center + align-items: center 更稳，不用算偏移、不依赖尺寸、无塌陷风险。
但 IE10–IE11 对 flex 的 align-items 支持有 bug（尤其内容为 inline 元素时），这时候还是得退回 absolute + transform。
立即学习“前端免费学习笔记（深入）”；
transform 导致字体模糊？可能是 subpixel 渲染问题
在某些 Chrome 版本或缩放比例下，translate(-50%, -50%) 若计算出小数像素（如 translate(-123.4px, -56.7px)），可能触发亚像素渲染，文字边缘发虚。
- 可加
will-change: transform提前提示浏览器优化，但别滥用，可能引发额外重绘 - 更稳妥的是确保父容器宽高为偶数值，且子元素宽高也尽量为偶数，减少小数偏移
- 若内容仅为图标或纯色块，基本无感；若是正文文本，建议优先测真实设备和缩放比例
真正难的不是写这三行 CSS，而是判断什么时候该用它、什么时候该换方案——比如父容器高度动态、内容不定高、还要兼容 IE9，那就得切回 table-cell 或 JS 补位了。
