margin: 0 auto 无法居中不定宽元素；应优先用 Flexbox（display: flex + justify-content: center），次选 text-align + inline-block，绝对定位仅适用于覆盖层场景。
用 margin: 0 auto 居中不定宽元素？行不通
这个写法只对 display: block 且有明确 width 的元素生效。不定宽的 div、span 或内联内容（比如一段文字、一个图标）加了 margin: 0 auto 完全没反应——浏览器根本不知道该从哪算“居中”。
真正能处理“不定宽”的，得靠更现代的布局机制。
Flexbox 是最直接可靠的方案
父容器设为 display: flex，再用 justify-content: center，子元素无论多宽、是否换行、是否动态生成，都能水平居中。
- 必须给父元素设置
display: flex，子元素默认变成 flex item，无需额外设宽 - 如果子元素是文本或内联元素，建议加上
text-align: center配合使用（避免子元素内部文字左对齐造成视觉偏移） - 注意：旧版 Android 4.4 以下 WebView 对
flex支持不全，如需兼容，得加-webkit-前缀
<div style="display: flex; justify-content: center;"> <button>任意宽度按钮</button> </div>
Text-align + inline-block 适合纯内容居中
当你要居中的只是文字、图片或小图标这类天然内联内容时，不用 Flex 也能搞定。
立即学习“前端免费学习笔记（深入）”；
- 父元素设
text-align: center - 子元素如果是块级（如
div），需加display: inline-block才受text-align控制 - 这个组合在 IE8+ 全面支持，但要注意
inline-block元素间会因换行产生空格间隙，可用父元素font-size: 0+ 子元素重设字体来消除
<div style="text-align: center;"> <div style="display: inline-block;">内容不定宽</div> </div>
绝对定位 + transform 要慎用
虽然 left: 50%; transform: translateX(-50%) 看似万能，但它把元素脱离文档流，容易引发后续布局错乱。
- 仅推荐用于模态框、提示气泡等“覆盖层”类场景
- 如果父容器没有设置
position: relative，它会相对于 viewport 居中，不是你想要的“在父容器里居中” - 动画或 JS 动态插入的元素若未触发重排，可能首次渲染位置偏移
真正难的不是怎么写居中代码，而是判断该用哪种居中——Flex 适合结构化容器，text-align 适合内容流，绝对定位只该是特例。选错方案，后面调试花的时间远超写几行 CSS。
