transform: translate(-50%, -50%) 在 ie9+ 及主流浏览器全系支持，但实际居中效果受父容器定位、子元素显示类型及低版本 webview 百分比解析偏差影响，ie8 需降级方案。
transform: translate(-50%, -50%) 的浏览器支持范围
这个组合在 IE9+ 就已可用，Chrome/Firefox/Safari/Edge 全系支持，包括 Android 4.4+ WebView 和 iOS 8+。真正不支持的只有 IE8 及更早版本——如果你的项目还要求兼容 IE8，就得降级用 margin 负值或 calc()。
IE10–11 中 transform 居中失效的隐藏原因
不是语法不支持，而是某些 CSS 触发了 IE 的“怪异模式”或 layout 触发失败：
- 父容器没设
position: relative（IE 下对包含块判定更严格） - 子元素用了
display: inline-block或float，导致 IE 不把该元素当“可 transform 对象”处理 - 父容器高度为
auto且没内容撑开，top: 50%算出 0px —— 这在所有浏览器都失效，但 IE 报错更隐蔽
移动端 WebView 的常见兼容陷阱
老版 Android（≤ 4.3）和部分定制 ROM 的 WebView 对 transform 百分比解析有偏差，尤其当父容器用了 transform 或 perspective：
- 避免在父容器上同时写
transform: scale(0.9)和子元素transform: translate(-50%, -50%)，某些 WebKit 版本会把百分比基准算错 - 如果居中后偏移 1–2px，优先加
will-change: transform强制创建合成层，而不是改用margin负值 - 微信内置浏览器（X5 内核）在 2024 年前的版本里，对
transform嵌套支持不稳定，建议用display: flex回退方案
为什么不能只靠 Can I Use 查兼容性
transform 支持 ≠ transform + 百分比 + 绝对定位 组合支持：
- Can I Use 显示 “支持 transform”，但没告诉你 IE11 在
position: fixed容器里对translate(-50%, -50%)的计算会丢精度 - 某些 Android 低版本 WebView 支持
translateX()，但不支持translate(-50%, -50%)中的 Y 轴百分比 - 真正要验证的不是“能不能用”，而是“在你目标设备的真实页面里，
top: 50%; left: 50%; transform: translate(-50%, -50%)是否让视觉中心落在父容器几何中心”
display 类型变化（比如被 JS 动态设为 inline）而意外脱离了 transform 作用域。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
