混合HTML元素居中必须统一布局模型，text-align与margin: auto语义冲突易失效；Flex布局最可靠，设display: flex后用justify-content和align-items统一分配；绝对定位仅适用于脱离文档流场景。
混合排列的 HTML 元素（比如 <div>、<img>、<span>、<button> 同时存在）没法靠单一 CSS 规则“一招鲜”，必须按容器统一布局模型，否则 text-align、margin: auto、flex 会互相打架。
为什么 text-align + margin: auto 混用总失效
这是最常翻车的组合：text-align: center 只作用于行内内容（文字、<img> 默认 inline），而 margin: 0 auto 只对块级且有明确 width 的元素生效。两者语义完全不同，强行套在同一个父容器上，结果就是：文字居中了，<div> 还贴左，<img> 可能因 display 类型不同表现不一。
- 父容器设了
text-align: center，但子元素是display: block的<div>→ 它完全无视该声明 - 给
<div>自己加margin: 0 auto，但它没设width或被父容器设为display: flex→ 声明被忽略 -
<img>在父容器里既受text-align影响，又可能被vertical-align拉偏，尤其当它和文字混排时
统一用 Flex 布局是最省心的解法
只要父容器设 display: flex，所有直系子元素（不管原本是块级、行内还是替换元素）都自动变成 Flex 项目，justify-content 和 align-items 就能统一起效。
- 水平居中：只加
justify-content: center - 完全居中（水平+垂直）：再加
align-items: center，但父容器必须有明确高度（如height: 100vh或min-height） - 子元素无需设
width、margin或display覆盖，Flex 会自动处理 - 注意 Safari 旧版本需加
-webkit-前缀：display: -webkit-flex、-webkit-justify-content: center
绝对定位居中只适合脱离文档流的场景
如果你要居中的元素本身需要脱离正常流（比如模态框、提示气泡、加载 spinner），那 position: absolute + transform: translate(-50%, -50%) 是稳定选择，但它不适合普通内容流里的混合元素。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，否则top: 50%会相对于视口计算，滚动就飘走 -
transform: translate(-50%, -50%)的百分比基于元素自身宽高，所以它不要求你知道尺寸，但也不参与文档流布局 - 别在同一个父容器里混用 Flex 和绝对定位——Flex 项目一旦设
position: absolute，就退出 Flex 上下文，justify-content对它无效
真正难的不是选哪种方法，而是别让多种居中逻辑在同一层级共存。一个容器只用一种布局模型，要么 Flex，要么 Grid，要么绝对定位，混搭只会放大不可预测性。尤其当子元素类型杂、尺寸动态变化时，Flex 的宽容度远高于其他方案。
