text-align: center只对父容器内行内内容（如文字、img）水平居中，对块级子元素无效；margin: 0 auto需子元素块级且定宽；flex布局用justify-content:center最通用；绝对定位需配合transform: translatex(-50%)。
父容器用 text-align: center 只对行内元素有效
很多人一上来就给父 <div> 加 <code>text-align: center，发现子 <div> 完全不居中——因为 <code>text-align 不影响块级元素的定位，只控制其内部**行内内容**（比如文字、<span></span>、<img>）的水平对齐。
如果子元素是 <img> 或 <span></span>，这个方法确实能用；但要是子元素是另一个 <div>、<code><section></section> 或设置了 display: block 的元素，就得换方案。
子元素设 margin: 0 auto 要求宽度明确
这是最常用也最容易翻车的方法：给子元素加 margin: 0 auto。但它有个硬性前提——子元素必须有**明确的宽度**（不能是 width: auto 且未被限制）。
- ✅ 有效：
width: 300px、width: 50%、max-width: 400px（配合width: fit-content） - ❌ 无效：
width: auto且父容器没设display: flex或inline-block等触发 BFC 的条件 - ⚠️ 注意：
margin: 0 auto对position: absolute元素无效，除非同时设left: 0; right: 0
Flex 布局是最稳的父子居中解法
父容器设 display: flex + justify-content: center，基本覆盖所有常见场景，包括子元素是块级、弹性项、甚至多个并排元素。
示例：
<div style="display: flex; justify-content: center;"> <div style="width: 200px; height: 100px; background: #eee;"></div> </div>
- 子元素无需设宽度也能居中（flex item 默认不占满主轴）
- 想垂直居中？加
align-items: center - 兼容性够用：Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+
- ⚠️ 避坑：父容器高度为
0时，align-items: center看不出效果——得确保父有高度（比如min-height: 100vh或内容撑开）
绝对定位居中要慎用 transform
当需要脱离文档流时，常用 position: absolute 配合 left: 50% + transform: translateX(-50%)。这里 transform 是关键，不用它的话，50% 是按父容器宽度算的左边缘位置，会导致偏移一个自身宽度。
- ✅ 正确写法：
left: 50%; transform: translateX(-50%) - ❌ 错误写法：
left: 50%; margin-left: -100px（依赖固定宽，不响应式） - ⚠️ 注意：
transform在旧版 Safari（
margin: 0 auto（记得写死子元素宽度）；绝对定位仅用于特殊布局需求，别为了“居中”强行套用。
