text-align: center只对块级容器内的行内内容生效，必须作用于父元素而非文字本身；常见失效原因包括加在行内元素上、父容器无宽度、存在float/absolute脱离文本流、子元素为块级或表格结构使用不当。
text-align: center 是最常用、也最容易写错的居中方式——它只对块级容器内的行内内容生效，不是给文字本身加，而是给它的父元素加。
为什么 text-align: center 没反应？
常见失效场景包括：
- 把样式加在
<span>或<a>这类行内元素上——text-align只作用于块级容器（如<p>、<div>、<td>） - 父容器没设宽度，且是
display: inline-block或被float干扰，导致文本流不完整 - 子元素用了
position: absolute或float，脱离了文本流，text-align就管不到它 - 写成了
<div style="text-align: center"><div>文字</div></div>——内层<div>是块级，独占一行，不会被居中
<table> 里文字居中必须写在 <td> 或 <th> 上
text-align: center 加在 <table> 标签上完全无效，因为表格内容不在它的“行内流”里。垂直居中还得配 vertical-align: middle：
- 单个单元格：
<td style="text-align: center; vertical-align: middle">内容</td> - 整表统一控制：
td, th { text-align: center; vertical-align: middle; } - 避免用已废弃的
align="center"属性——HTML5 中它不合法，W3C 验证器会报错，部分 WebView 会直接失效 - 如果
<td>里嵌了<div>，仅靠text-align不会让那个<div>居中，得单独给它加margin: 0 auto或display: flex; justify-content: center
让整个 <div> 或 <table> 自身居中，别用 text-align
想让一个块级元素在页面中水平居中，text-align 不起作用，得用 margin: 0 auto：
立即学习“前端免费学习笔记（深入）”；
- 必须给该元素设明确宽度，比如
width: 600px或max-width: 80%；没宽度时margin: 0 auto直接失效 -
<table>默认是块级，所以<table style="width: 80%; margin: 0 auto">就能整表居中 - 别把
<table>套进display: flex容器里再居中——会破坏colspan/rowspan渲染，打印和读屏器也可能出错 - 如果父容器用了
flex，那应该用justify-content: center，而不是text-align，两者机制不同，混用反而冲突
真正要居中的对象，得先分清是“文字内容”还是“元素盒子本身”。前者看父容器是否块级、是否控制文本流；后者看宽度和外边距是否有计算基准——这两个判断点，绝大多数居中失败都卡在这儿。
