text-align只对块级父元素内的行内内容（如文字、img、span）水平居中有效，必须写在父元素上；块级元素自身居中需用margin:0 auto（须定宽、块级、非浮动/定位）；flex布局最灵活但依赖父容器高度和display类型。
直接说结论：没有“一个居中方法通吃所有场景”，写错一行 CSS 就可能完全没反应。关键不是背命令，而是先判断你要居中的到底是什么——是文字？img？还是整个 div？它在哪个容器里？要不要垂直居中？
text-align: center 只对父容器生效，且只管行内内容
这是新手最常写错的地方：text-align: center 必须加在**父元素**上，不是加在要居中的元素自己身上。
- 适用对象：文字、
span、img（默认 inline）、label（默认 inline）这类行内或行内块元素 - 错误示范：
- 正确写法：
- 注意：
div、p这类块级子元素不会被text-align推动位置，只影响它们内部的文字流
margin: 0 auto 要求三要素同时满足
margin: 0 auto 看似简单，但缺一不可，漏掉任一条件就“不动”。
- 元素必须是块级（
display: block或默认块级），img需先加display: block - 必须显式设置
width（如width: 300px或width: 80%），不能是auto、max-content或未声明 - 父容器不能是
display: flex或display: grid，否则margin: auto会被忽略 - 元素不能脱离文档流（即不能有
float、position: absolute或position: fixed）
Flex 布局居中要小心父容器高度和 display 类型
display: flex 是目前最灵活的方案，但容易栽在两个细节上：
- 水平居中只需：
.parent { display: flex; justify-content: center; } - 垂直居中必须加
align-items: center，但前提是父容器有**明确高度**（如min-height: 100vh或height: 400px），否则垂直方向根本没空间可居中 - 如果父容器是
body，记得先重置默认margin: 8px，否则左右各留白 8px，视觉上偏左 -
justify-content: center对子元素类型无要求，div、img、span全都能居中，但子元素自身的float、vertical-align会失效
label 和 input 并排时，别用 text-align 搞“假居中”
给 label 单独设 text-align: center，只会让里面文字居中，label 自身还在原位，和 input 依然错位。
- 真正有效的做法：把
label+input包进一个容器，设display: flex+justify-content: center - 垂直对齐更关键：同一容器下加
align-items: center，一句解决基线（baseline）不一致问题 - 表格中不要在
table或tr上写text-align，得写在td或th上 - 移动端建议加
cursor: pointer和min-height: 1.2em，避免 iOS Safari 点击热区偏差
真正卡住人的往往不是写法本身，而是父容器是否塌缩、是否有默认 margin、是否意外触发了 flex/grid 布局——这些隐性状态，比 CSS 属性本身更决定居中能不能看见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
