text-align: center 仅对行内内容生效，对块级元素自身无效；块级元素水平居中需用 margin: 0 auto（须设宽度）或 flex justify-content；垂直居中单行用 line-height，多行用 flex align-items；绝对定位居中需配合 transform。
text-align: center 不起作用的常见原因
当 text-align: center 看起来“没反应”，大概率不是写错了，而是元素本身不满足触发条件。它只对**行内内容**（如文字、inline 元素）生效，对块级容器自身的定位无影响。
- 父容器是
display: inline-block或未设宽度，导致实际可渲染宽度远小于视口，文字在“窄盒子”里已居中，但视觉上像没动 - 子元素是
display: block（比如div、p），此时text-align对它内部文字有效，但对它自身位置无效——想移动这个块，得用别的方法 - 用了
float或position: absolute，脱离了文档流，text-align失去作用对象
让块级元素水平居中：margin auto 与限制条件
margin: 0 auto 是最常用方案，但它有硬性前提：元素必须是块级（display: block 或 inline-block），且**宽度不能是 auto**（即必须显式设置 width、max-width 或 fit-content）。
.box {
width: 300px; /* 必须指定宽度 */
margin: 0 auto; /* 左右外边距自动均分 */
}
- 若用
width: 100%，margin: 0 auto无效（左右没剩余空间可分） -
弹性布局下优先用
justify-content: center，更可靠且无需设宽 -
绝对定位元素可用
left: 50%; transform: translateX(-50%)模拟居中，兼容性好
垂直居中文字：line-height 与 flex 的取舍
单行文字垂直居中，line-height 最简单；多行或需响应式，则必须用 flex 或 grid。
-
line-height只适用于单行，且值需等于容器高度（如height: 40px; line-height: 40px），换行会彻底错乱 -
display: flex; align-items: center对单行/多行都稳定，但老版本 Safari 对flex的align-items支持有 bug - 避免用
vertical-align: middle配合display: table-cell，语义混乱、调试困难，现代项目基本淘汰
定位后文字偏移：transform 与 top/left 的配合陷阱
用 position: absolute 定位元素时，居中常写成 top: 50%; left: 50%，但这会让元素左上角落在中心点，文字看起来偏右下。
立即学习“前端免费学习笔记（深入）”；
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 必须补上这句 */
}
- 漏掉
transform是高频错误，尤其当元素宽高不固定时，margin无法动态计算 -
transform触发硬件加速，性能比纯top/left更好，但可能影响z-index层叠上下文 - 若父容器未设
position: relative，absolute元素会相对于最近定位祖先或初始包含块定位，容易“飞走”
实际项目中最容易被忽略的是盒模型本身的尺寸行为：padding、border 是否计入 width，box-sizing 是否统一为 border-box。一个看似简单的居中，往往卡在这些隐性约束上。