text-align: center 在 ie6–8 中并非不生效，而是仅作用于行内内容（如文字、span、img），对块级元素无效；常见错误是误给 div 自身设该属性却期望整块居中。
text-align: center 在 IE6–8 里为啥不生效
它其实生效了，但只作用于行内内容；很多人误给 <div> 自身设 <code>text-align: center，却指望整个块居中——这不可能。IE6–8 对块级元素的文本对齐逻辑和现代浏览器一致，问题出在目标元素类型错配。
- 检查你要居中的是否真是行内元素（
<span></span>、<img>、文字）；不是就别用text-align - 父容器必须是块级且有明确宽度（比如
width: 100%或固定值），否则 IE6–7 可能忽略居中行为 - 避免在父容器上同时设
float或position: absolute，会破坏text-align的作用域
margin: 0 auto 在 Safari 和 IE6–7 的差异点
margin: 0 auto 是定宽块级元素水平居中最稳的方案，但它在 Safari 和老 IE 里有个关键分歧：Safari 要求父容器不能是 display: inline-block 或 display: table，而 IE6–7 则要求子元素不能是 display: inline 或没设 width。
- 必须显式声明子元素的
width（哪怕width: fit-content），IE6–7 完全不识别无宽的automargin - Safari 14+ 对
margin: auto在 Flex/Grid 容器内的行为做了收紧，此时混用margin: auto和justify-content: center会导致子元素偏移 - IE6 下若父容器是
position: relative且没设width，margin: 0 auto可能退化为左对齐
Flex 居中在 IE10–11 的前缀与塌陷陷阱
IE10–11 支持 Flex，但需加 -ms- 前缀，且对父容器高度极其敏感——没高度，align-items: center 就是摆设。
- 写成
display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center;才能在 IE10–11 正常工作 - 父容器必须有明确高度（
height、min-height或被内容撑开），IE11 不会像 Chrome 那样“猜”交叉轴长度 - 子元素若设了
flex: 1或width: 100%，可能挤压父容器高度，导致垂直居中失效——先查父容器 computed height 是否为 0
transform: translate(-50%, -50%) 的滚动偏移问题
这个组合在 IE9+、Edge 12+、所有现代 Chrome/Firefox/Safari 都可用，但滚动时位置飘走，是因定位上下文没锁死。
- 父容器必须设
position: relative（或absolute/fixed），否则top: 50%会相对于 viewport 计算，一滚动就脱靶 - 不要拆开写
transform: translateX(-50%) translateY(-50%)，IE9–10 只认完整函数形式，漏一个括号或逗号就完全失效 - 图片或字体未加载完成时，
translate会按初始尺寸计算偏移，造成短暂闪动；可加min-width/min-height或用aspect-ratio锚定比例
