text-align: center 仅对内联级内容（如文字、span、img、inline-block元素）生效，不影响块级子元素；对table-cell容器内所有内容均有效，但在Flex布局中冗余。
text-align: center 只对内联内容有效
很多人以为 text-align: center 能让任意文字“居中”，结果发现 div 里放了个 span 没反应，或者整个块级盒子死活不挪位置——问题不在写法，而在作用对象。它只影响容器内部的**内联级内容**（比如文字、span、img）的**行内对齐方式**，对块级子元素（如 div、p、section）完全无效。
常见错误现象：
– 给父 div 加了 text-align: center，但里面套了个 div，依然靠左
– 在 Flex 容器里重复加 text-align: center，纯属冗余
- 适用场景：给段落、按钮文字、导航链接等纯文本或内联元素水平居中
- 如果子元素是块级，得用
margin: 0 auto（需有明确宽度）或display: flex+justify-content: center -
text-align不影响元素自身定位，只影响其“内容流”的对齐基准线
inline-block 元素也能被 text-align 居中
这是个常被忽略的突破口：把块级元素临时变成内联级，text-align: center 就能管用了。典型做法是给子元素设 display: inline-block，再配合父容器的 text-align: center。
使用场景：
– 需要居中的卡片、按钮组、图标列表，又不想用 Flex 或 Grid
– 兼容老浏览器（IE8+）时的稳妥方案
立即学习“前端免费学习笔记（深入）”；
- 必须确保父容器有
text-align: center，子元素有display: inline-block - 注意默认空白符：多个
inline-block元素间换行会生成空格，导致间隙；可用父容器font-size: 0+ 子元素重设字体来消除 - 性能无明显影响，但语义上不如 Flex 清晰，维护时容易遗漏
vertical-align对齐问题
text-align: center 在 table-cell 中的行为不同
当容器是 display: table-cell（比如表格单元格，或模拟表格布局），text-align: center 仍然生效，但它此时控制的是**单元格内所有内容的水平对齐**，包括块级子元素——这和普通块容器完全不同。
常见错误现象：
– 把一个 div 设为 table-cell 后，里面放 div 竟然居中了，误以为是 text-align “变强”了
– 忘记 table-cell 必须配合 display: table 或表格相关 display 值才能正常渲染
- 真正起作用的是
table-cell的布局模型，不是text-align本身能力增强 - 兼容性好（IE8+），但语义混乱，现代项目尽量避免用 table-cell 模拟布局
- 如果同时设置
vertical-align: middle，还能实现垂直居中，但这属于 table-cell 特性，和text-align无关
Flex 布局下 text-align: center 是多余的
一旦父容器用了 display: flex，text-align: center 对子元素居中就完全没用。水平居中该靠 justify-content: center，文字对齐仍由子元素自己的 text-align 控制。
容易踩的坑：
– 在 Flex 容器上保留 text-align: center，以为“多加一层保险”
– 给 Flex 子项（比如 p）设 text-align: center，却忘了它只影响该 p 内部文字，不影响它在 Flex 主轴上的位置
- Flex 子项是块级还是内联，不影响
justify-content的效果 - 若子项内还有文字需要居中，才单独在子项上设
text-align: center - 混用
text-align和 Flex 属性容易造成理解错位，建议明确分工：布局归 Flex，文本对齐归text-align
最常被忽略的一点：text-align 的作用范围永远只到直接子元素的内容层，它不递归、不穿透、不改变盒模型。拿不准时，先看子元素是不是内联级——不是，就别硬试。
