ie8及更早版本中text-align:center对img居中失效，因块级父容器未设width或含浮动子元素时对齐行为异常；margin:auto需display:block+显式width；垂直居中须用display:table-cell+vertical-align。
IE8 及更早版本不支持 不是写法错，而是 IE7–8 对块级父容器内行内元素的对齐行为有偏差：当父 IE8 支持 实操建议： IE8– 不支持 Flex， 实操建议： 旧版 IE 对 text-align: center 对 <img> 的居中效果（尤其当父容器是 <div> 且未设 <code>width），也不能用 margin: auto 垂直居中；必须降级到 IE6 就已稳定支持的方案。
为什么
text-align: center 在 IE7–8 里有时失效<div> 没设 <code>width 或含浮动子元素时，text-align 可能被忽略或只影响文字、不响应图片。另外，<img> 在 IE6–7 中若被包裹在 <p></p> 外再套一层 <div>，也容易因盒模型计算错误导致偏移。
<p>实操建议：</p>
<ul><li>确保父容器是 <code><p></p> 或设了 display: inline-block 的 <div>，而不是纯块级无宽 <code><div>
<li>避免在父容器上同时用 <code>float 和 text-align: center —— IE7 下会冲突
zoom: 1 触发 hasLayout，修复部分盒模型错位
margin: auto 居中在 IE8– 里要加 display 和 widthmargin: auto 水平居中，但条件比现代浏览器更严格：图片必须显式设为 display: block，且父容器不能是 position: relative/absolute（否则 IE7 会“逃逸”到视口顶部）。
<img src="x.jpg" style="max-width:90%"> 是安全写法width: 100% —— IE8 不识别 margin: auto 在 100% 宽度下的行为position: relative，IE7 下图片可能跳到页面左上角，此时改用 text-align 方案更稳垂直居中只能靠
display: table-cell + vertical-align
transform: translate(-50%, -50%) 在 IE9 才开始支持，所以真垂直居中只能回退到表格单元格方案。这个方案从 IE6 起就完全可靠。
display: table-cell; width: 100%; height: 100%; vertical-align: middle;
display: table 在更外层容器（否则 IE7–8 不渲染为表格上下文）height 或 width，让它自然缩放；如需等比缩放，用 max-width: 100%; max-height: 100%
<div style="display: table; width: 100%; height: 300px;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
@@##@@
</div>
</div>
真正难的不是居中，而是判断它是否脱离文档流
float、position: absolute、inline-block 的处理极不稳定。一旦图片被 float: left 或 position: relative 干扰，text-align 和 margin: auto 都会失效——这时别调样式，先检查 DOM 结构里有没有隐藏的浮动清空、有没有意外的 position 继承。兼容性问题往往卡在“它看起来没动，其实是被别的规则拽走了”。
