ie9+兼容的绝对定位+transform居中方案需三步：子元素设position: absolute、top: 50%+left: 50%、transform: translate(-50%, -50%)，且父容器必须设position: relative；translate百分比基于自身尺寸，适配动态宽高，ie9–10需加-ms-前缀。
IE9+ 仍可用的绝对定位 + transform 居中
这是目前兼容性最广的现代居中方案，能覆盖 IE9 及以上所有主流浏览器（包括旧版 Android WebView 和 iOS Safari），且不依赖子元素尺寸。
关键点在于三步必须同时存在：position: absolute、top: 50% + left: 50%、transform: translate(-50%, -50%)。漏掉 transform 就会偏移到左上角，而不是中心。
- 父容器必须设
position: relative，否则top/left会相对于视口计算，滚动时错位 -
translate(-50%, -50%)的百分比是相对于自身宽高，不是父容器——所以即使子元素宽高动态变化（比如响应式文字、未加载完的图片），也能居中 - 在 IE9–10 中，
transform需加-ms-前缀：-ms-transform: translate(-50%, -50%) - 避免和
margin: auto混用，IE9 下行为不可靠
IE6+ 兼容的 margin: 0 auto 水平居中
对块级元素水平居中仍然最稳，但仅限水平方向，且有硬性前提：子元素必须有明确 width（或 max-width），且不能是 100%。
常见失效现象：div 写了 margin: 0 auto 却不动——八成是没设 width，或父容器用了 display: flex / display: grid，覆盖了 auto 行为。
- 父容器不能是
flex或grid容器，否则margin: auto被忽略 - 子元素不能是
inline或inline-block，否则需先设display: block - IE6–7 对
min-width/max-width支持差，建议用固定width或配合 hack（如*width） - 垂直方向无法靠这个实现，得搭配其他方案（如
line-height或嵌套 table-cell）
text-align: center 处理行内内容的兼容底线
这是唯一能在 IE8+ 甚至更老浏览器里稳定生效的“居中”手段，但它只作用于行内内容（文本、img、span），对块级子元素完全无效。
很多人误给 div 自身设 text-align: center，指望它居中自己——这是典型误解。它真正生效对象是它的直接子元素中的行内内容。
- 父容器设
text-align: center，子元素是p、span、img等，默认就会水平居中 -
img是inline-block，所以也吃这套；但若它被设了display: block，就得换别的方案 - 不要试图用它垂直居中——
vertical-align在非table-cell或flex环境下基本不可靠 - 在 IE8 中，
text-align对input、button内部文字有效，但对整个控件本身无效
旧版 IE 的 fallback：table-cell + vertical-align
当必须支持 IE8 及以下，又需要垂直居中时，display: table-cell + vertical-align: middle 是最后手段。它不优雅，但有效。
注意这不是“用 <table> 标签”，而是纯 CSS 模拟表格行为。缺点明显：需要两层包裹，且父容器必须有明确高度。
<ul>
<li>外层容器设 <code>display: table; height: 300px; width: 100%;
display: table-cell; vertical-align: middle; text-align: center;
div、img），无需额外样式zoom: 1 触发 hasLayoutheight 一变，居中就失效；不推荐用于移动端position + transform，再降一级到 IE8 就得切到 table-cell —— 这些分支逻辑容易漏测，尤其是子元素宽高动态变化时，transform 的闪动或 table-cell 的高度塌陷，往往上线后才暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
