真正能稳住未知宽度的居中方案有四种：一是父容器用flex+justify-content:center（ie10+）；二是行内级元素用text-align+inline-block；三是绝对定位+transform:translatex(-50%)（ie9+）；四是table-cell方案（ie8兜底）。
不能用 margin: 0 auto，它要求明确宽度；也不能只靠 text-align: center，除非子元素是行内级。真正能稳住未知宽度的，就那几种靠谱路径，选错一个就白调。
父容器用 flex + justify-content: center
这是现代项目里最省心、兼容性也够用（IE10+ 带前缀）的方式，不依赖子元素宽高，也不用改它的 display 类型。
- 父元素加
display: flex和justify-content: center - 子元素保持原样——
div、span、img、甚至button都能立刻居中 - 注意：如果父容器原本有
float或display: inline-block，先清掉，否则 flex 不生效 - IE10/11 对
justify-content有渲染 bug，比如多子项时偶尔偏移，单个子项通常没问题
行内级元素用 text-align + inline-block
适合按钮、图标组、文字块这类天然不设宽的元素，本质是把它们“当文字处理”。
- 父容器设
text-align: center - 子元素设
display: inline-block（img等原生内联元素可跳过这步） - 别漏了父容器必须是块级且有明确宽度，否则
text-align没作用范围 - 常见坑：
vertical-align: baseline默认会让元素底部对齐，加vertical-align: middle更稳
绝对定位 + transform: translateX(-50%)
当你已经用了 position: absolute 或 position: fixed，又没法改布局结构时，这是唯一安全解法。
- 父容器必须设
position: relative（或absolute/fixed），否则left: 50%会相对于 viewport 计算 - 子元素写
position: absolute; left: 50%; transform: translateX(-50%) -
transform是关键——它按自身宽度平移，不用知道具体像素值 - IE9+ 支持，但旧版 Safari 需要
-webkit-transform前缀 - 别只写
left: 50%，否则左边缘在中心，右边全跑出去
table-cell 方案（老项目兜底）
兼容 IE8，但语义失真、DOM 结构僵硬，只建议在必须支持老浏览器且无法用 flex 的场景下临时用。
- 父容器设
display: table-cell、text-align: center、vertical-align: middle - 子元素设
display: inline-block（不能是block，否则text-align失效） - 父容器必须显式设宽高，否则
table-cell行为不可控 - IE8 支持，但 IE7 及以下不认
display: table-cell，得降级用空 span +vertical-align，更麻烦
真正容易被忽略的是：居中不是“套个样式就行”，而是先判断这个元素是否还在文档流里、父容器有没有被 flex/grid/float 干扰、以及你愿不愿意为兼容性妥协。比如一个 div 本来是块级，你给它加了 float: left，再写 margin: 0 auto 就纯属白费劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
