居中需按元素类型选择方案：行内内容用父容器text-align:center；块级元素定宽后margin:0 auto；现代布局首选flex的justify-content:center与align-items:center；绝对定位元素用left/top50%加transform回拉。
用 text-align: center 居中行内内容最直接
纯文本、span、img 这类默认行内元素，加 text-align: center 到父容器就行。它不作用于块级子元素本身，只控制其内部“文字流”的对齐方式。
常见错误是给要居中的 div 自己加 text-align: center，结果没用——因为 div 默认是块级，里面没“行内内容”可对齐。
- 适用场景：标题文字、按钮组里的图标+文字、单行说明文案
- 注意：如果父容器宽度没撑开（比如浮动后塌陷），
text-align看不出效果，先确认父容器有宽度 - 兼容性极好，所有浏览器都支持
margin: 0 auto 居中块级元素的前提是定宽
想让一个 div、section 在页面水平居中，最常用的是 margin: 0 auto。但它只对设置了明确宽度（width）的块级元素生效。
典型报错现象：写了 margin: 0 auto 却纹丝不动，大概率是忘了设 width，或者用了 display: inline-block 却没处理换行符带来的空白间隙。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
width（比如width: 300px或width: 80%） - 不能和
float共存；若父容器浮动了，需先清除浮动或触发 BFC - 不适用于
position: absolute元素（此时用left: 50%; transform: translateX(-50%)）
Flex 布局居中：一行代码解决多数居中需求
现代项目首选 display: flex，父容器加 justify-content: center 就能水平居中子元素，再加 align-items: center 就能垂直居中——无论子元素是块级还是行内，有没有固定尺寸。
容易踩的坑是只加了 justify-content 却忘了父容器高度。如果父容器没高度（比如空的 div），align-items: center 垂直居中就无效。
- 父容器需有明确高度才能实现真正的垂直居中（如
min-height: 100vh） - 子元素默认被拉伸成同一高度，如不希望这样，加
align-items: flex-start - IE10+ 支持，但 IE10/11 对某些 Flex 属性有 bug（如
flex: 1行为异常）
绝对定位 + transform 居中：适合脱离文档流的弹窗类元素
当元素需要脱离文档流（比如模态框、tooltip），又必须精确居中时，用 position: absolute 配合 left: 50% 和 top: 50%，再用 transform: translate(-50%, -50%) 回拉自身宽高的一半。
不用 margin 回拉的原因是：你往往不知道元素宽高（尤其是响应式内容），transform 是基于自身尺寸计算，更可靠。
- 必须确保父容器是相对定位（
position: relative），否则会相对于 viewport 定位 -
transform在低版本 Android 浏览器里可能有渲染闪烁，可加will-change: transform缓解 - 不要和
transition同时作用在top/left上，会导致动画卡顿；优先过渡transform
居中看着简单，实际取决于元素类型、是否脱离流、父容器状态、是否响应式——选错方法轻则无效，重则引发布局塌陷或兼容问题。最稳妥的做法是：先确认你要居中的到底是什么（行内？块级？绝对定位？），再看父容器有没有约束条件（宽高、定位、浮动），最后挑匹配的方案。
