text-align仅作用于块级容器内的行内内容，不能使块级元素自身居中；让块级元素居中需用margin:0 auto（需设width且为块级）、flex布局（父容器设display:flex+justify-content:center）或绝对定位+transform（父容器需有定位上下文）。
text-align 只对行内内容起作用，别用它居中 div
很多人一看到“居中”就下意识写 text-align: center，结果发现整个 div 没动，只有里面文字偏了。这是因为 text-align 作用对象是块级容器内部的**行内内容**（比如文字、img、span），不是容器自己。
常见错误现象：div 加了 text-align: center，但子 div 还是左贴边；或者给 input 写 text-align: center，只让输入文字居中，框本身位置没变。
- 想让文字/图片在父容器里水平居中 → 给父容器加
text-align: center - 想让一个块级元素（如
div、section）自身居中 → 不能靠text-align，得换方法 - 注意：
text-align: justify会拉伸单词间距实现两端对齐，中文效果常不理想，慎用
margin: 0 auto 要生效，必须满足两个硬条件
margin: 0 auto 是块级元素水平居中最经典的方法，但它不是“写了就灵”。浏览器需要能算出左右空多少，这就要求：
- 目标元素必须有明确的
width（比如width: 400px或width: 80%），百分比也行，但不能是width: auto或没设 - 元素必须是块级（
display: block或默认行为），inline、inline-block不吃这套 - 父容器不能是
text-align: left且子元素是inline-block—— 那时margin: 0 auto会失效，得改父容器的text-align或换布局方式
典型翻车现场：div 没设 width，只写 margin: 0 auto，结果纹丝不动；或者用了 display: inline-block 后又忘了清除父容器里的空白字符，导致轻微偏移。
Flexbox 居中要写在父容器上，不是目标元素
用 Flexbox 实现居中，核心动作是配置**父容器**，不是给要居中的元素加样式。写错位置是新手最高频失误。
- 水平居中 → 父容器加
display: flex+justify-content: center - 垂直居中 → 再加
align-items: center - 如果只加在子元素上（比如给
div写display: flex），那它只是把自己变成 flex 容器，对它在父级里的位置毫无影响 - 老版 Safari（iOS 8 及更早）需加前缀：
display: -webkit-flex、-webkit-justify-content: center
顺带提醒：body 直接设 display: flex 很危险，可能把所有子元素（包括 header、nav）全拉成一行。建议包一层 main 或 div.container 再开 flex。
绝对定位 + transform 居中，父容器必须有定位上下文
当元素要脱离文档流（比如弹窗、加载指示器），position: absolute 配合 transform: translate(-50%, -50%) 是最可控的方案。但它依赖“最近定位祖先”来确定参考系。
- 目标元素写：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 它的**直接父容器或某个祖先容器**必须有
position: relative（或absolute/fixed），否则会相对于body定位，一跑就飞出视口 - 别用
margin-top: -100px这类固定值模拟居中——高度未知时完全不可靠 - Android 4.3 及以下 WebView 需加
-webkit-transform前缀
真正容易被忽略的点是：这个“最近定位祖先”不一定就是直接父级。如果中间某层恰好有 position: relative 但你没意识到，居中就会以它为基准，而不是你以为的父容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
