最常用居中方法是text-align: center，但仅对inline/inline-block元素有效；块级元素需用margin: 0 auto（需明确width）、flex布局（需父容器有高度）或absolute+transform（最可靠）。
用 text-align: center 居中行内内容最常用但有局限
它只对 inline 或 inline-block 元素生效，比如文字、图片、<span></span>。对 <div> 这类块级元素本身没用——你改的是它的子内容怎么排，不是它自己在哪。
<p>常见错误现象：<code>div 设了 text-align: center 却纹丝不动，其实是忘了里面的内容默认是块级（比如另一个 div），没被“居中对象”覆盖到。
- 想居中文本？直接加
text-align: center到父容器就行 - 想居中一个块级子元素？得让它变成
inline-block，再配text-align: center - 注意：
vertical-align: middle在这里不起作用，它只管行内上下对齐，不是垂直居中
margin: 0 auto 居中块级元素的前提很具体
这是让块级元素水平居中的经典写法，但必须同时满足三个条件：宽度明确、左右 margin 是 auto、元素是块级且非浮动/绝对定位。
常见错误现象：margin: 0 auto 没反应，大概率是漏了 width（比如用了 max-width 却没设 width），或者父容器没撑开（比如父级是 display: inline-block 或塌陷了）。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
width，fit-content或max-width不够 - 不能和
float、position: absolute共存，否则automargin 失效 - 父容器需要有确定的宽度上下文（比如不是
display: flex或display: grid的默认流）
Flex 布局居中真正简单，但别乱套在 body 上
display: flex + justify-content: center + align-items: center 是目前最直观的居中方案，但它会改变子元素的布局行为，尤其容易忽略父容器高度问题。
使用场景：模态框、登录框、图标卡片这类需要精确居中的模块；不推荐全页用它强行“撑高 body”来居中内容。
- 父容器必须有高度，否则
align-items: center垂直方向无效（比如body没设min-height: 100vh） - 子元素如果本身是
flex容器，可能触发嵌套 flex 行为，导致意料外的对齐 -
justify-content控制主轴，align-items控制交叉轴——主轴方向由flex-direction决定，默认是横向
绝对定位居中要小心脱离文档流带来的连锁影响
position: absolute 配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%) 是唯一能稳定实现“任意尺寸元素真居中”的方法，但它会让元素脱离文档流。
性能影响不大，但兼容性要注意：transform 在 IE9+ 支持，IE8 及以下必须用负 margin（需提前知道宽高）。
- 父容器必须设
position: relative（或其它非static值），否则定位基准是 viewport -
transform是关键，只靠top/left会偏移元素左上角，不是中心点 - 如果元素宽高动态变化（比如文字换行、响应式图片），
transform依然可靠；负 margin 方案则立刻失效
真正麻烦的不是选哪种方式，而是混用时的优先级冲突——比如给同一个元素同时设 flex 和 position: absolute，或者在 text-align: center 的父级里又用 margin: 0 auto。居中逻辑一旦叠了层，就很难靠肉眼判断最终谁生效。
