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