margin: 0 auto仅适用于定宽块级元素的水平居中，需同时满足块级、明确宽度、无浮动/定位三个条件；flex布局则可一键实现任意元素水平垂直居中。
绝大多数居中需求，用 margin: 0 auto 或 display: flex 就能覆盖 95% 场景，不用查文档、不依赖 JS。
定宽块级元素水平居中：只靠 margin: 0 auto
这是最轻量、兼容性最好（IE6+）的方案，但前提是子元素必须有明确的 width 值。
- 父容器不需要特殊设置，只要不是
display: inline或float打乱文档流即可 - 子元素不能是
position: absolute/fixed，否则margin: auto失效 - 错误写法：
margin: auto—— 缺少上下值会导致垂直方向也试图居中（在块级上下文中无意义，但可能干扰布局） - 正确写法：
margin: 0 auto或margin-left: auto; margin-right: auto
示例：
.box {
width: 300px;
margin: 0 auto;
}
任意元素水平 + 垂直居中：用 display: flex 最省心
只要父容器加两行 CSS，子元素无论宽高是否固定、是否换行、是否多层嵌套，都能一步到位居中。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex后，justify-content: center控制水平，align-items: center控制垂直 - 注意：如果父容器高度未知，需确保它有明确高度（如
height: 100vh或继承自 body），否则垂直居中无效 - IE10+ 支持良好；IE9 及以下不支持，需降级为绝对定位方案
- 不要对 flex 容器本身再设
text-align: center，它对 flex 子项无效
示例：
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
行内/文本内容居中：别乱动子元素，盯紧父级 text-align
text-align: center 只作用于**行内内容**（文本、<img>、inline 或 inline-block 元素），对块级子元素本身无效。
- 常见错误：给父
<div>设了text-align: center，里面放一个<p>却没居中——因为<p>是块级，不受影响 - 解决方法：要么把子元素改成
display: inline-block，要么直接对子元素用margin: 0 auto - 多行文本垂直居中？单行可用
line-height = height；多行推荐 flex，或display: table-cell + vertical-align: middle
老项目兼容 IE8–9：回退到绝对定位 + transform
当不能用 flex、又不想写 table hack 时，这个组合是目前最干净的降级方案。
- 父容器需设
position: relative，子元素设position: absolute - 关键三句：
top: 50%、left: 50%、transform: translate(-50%, -50%) - IE9+ 支持
transform；IE8 需用负 margin（要求宽高固定）：margin-top: -XXpx; margin-left: -XXpx - 注意：若子元素含文字，部分低版本 Chrome 可能出现轻微模糊，加
transform-style: preserve-3d可缓解
真正容易被忽略的是：居中不是孤立操作。它总依赖上下文——父容器有没有高度？子元素是不是脱离文档流？浏览器要不要兼容旧版？先确认这三点，再选方案，比背口诀管用得多。
