text-align: center仅居中行内内容；margin: 0 auto需定宽才居中块级元素；flex布局中justify-content: center最稳且不限宽高。
用 text-align: center 居中行内内容最常用但有局限
它只对 span、a、img 这类行内元素或文本生效，对 div、section 这种块级元素没用——因为块级元素默认占满父容器宽度，“居中”无从谈起。
常见错误现象：div 里写了 text-align: center，但整个 div 自己还是靠左贴边。
实操建议：
- 只用于让子元素（如文字、图片）在当前块内水平居中
- 配合
display: inline-block可间接让块级子元素“被居中”，但需注意父容器要清除换行符带来的间隙 - 不适用于 Flex 或 Grid 布局的现代场景，属于老式兼容方案
margin: 0 auto 居中块级元素的前提是定宽
这是让一个块级元素自身在父容器里水平居中的经典写法，但必须满足两个条件：该元素有明确的 width（不能是 auto），且 display 是 block（默认值）。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：margin: 0 auto 写了但完全没反应，大概率是忘了设 width，或者元素被设成了 display: inline 或 flex。
实操建议：
- 给目标元素加
width: 300px（或%、rem等具体值）再配margin: 0 auto - 响应式下慎用固定像素宽，推荐用
max-width+width: 100%组合 - 不支持垂直居中，上下
margin设为auto在非 Flex 场景下无效
Flex 布局里 justify-content: center 是最稳的水平居中
只要父容器设了 display: flex，子元素默认就成 Flex 项目，justify-content: center 能直接让它水平居中，且不受宽高限制。
使用场景：卡片列表、登录框、按钮组、任何需要灵活对齐的容器。
实操建议：
- 父容器加
display: flex和justify-content: center - 如果子元素是单个块，通常还需加
align-items: center实现垂直居中 - 注意老版本 safari 对
flex的兼容性（ios -webkit- 前缀） - 别在已经用
Float或position: absolute的元素上硬套 Flex 居中，行为不可控
绝对定位 + transform: translate(-50%, -50%) 适合脱离文档流的精确定位
当元素需要用 position: absolute 或 fixed 脱离文档流时，left: 50%; top: 50% 只是把左上角移到中心，得靠 transform: translate(-50%, -50%) 把自己“拉回”中心点。
常见错误现象：只写 left: 50%; top: 50%，结果元素右下角才在中心，整体偏右下。
实操建议：
- 父容器记得设
position: relative（否则absolute会相对于 viewport 定位） -
transform的百分比是相对于元素自身宽高的，所以无需知道具体尺寸 - 性能上比 Flex 稍重一点（触发重绘），但日常使用感知不到
- 别和
margin: 0 auto混用，定位模式冲突
居中看着简单，但每种写法背后都绑着特定的布局上下文。选错前提（比如给不定宽块用 margin: 0 auto），或者忽略父容器的定位/显示模式，问题就藏在看不见的地方。