text-align仅对块级容器生效，须作用于父元素如<p><div>等；块级元素自身水平居中应使用margin: 0 auto并设width；表格整体居中推荐flex方案，单元格内容对齐用text-align/vertical-align。
text-align 只对块级容器生效，别乱加在 <span> 或 <img> 上
给 <span> 写 style="text-align: center" 没用——它不是块级元素，text-align 根本不作用于它。真正起效的位置是它的父级块容器，比如 <p>、<div>、<th> 或 <td>。
常见失效场景：
- 把
text-align加在<img>上：图片本身不会居中，得加在它的父<p>或<div>上 - 父容器用了
display: flex：此时text-align被justify-content覆盖，视觉上“失灵” -
<p>里嵌了<div>：文字能居中，但那个<div>会独占一行，不受text-align影响
整块元素（如 <div>、<table>）水平居中用 margin: 0 auto，不是 text-align
text-align: center 是让内容“站队”，margin: 0 auto 才是让盒子自己“站中间”。两者完全不是一回事。
用 margin: 0 auto 的前提条件：
立即学习“前端免费学习笔记（深入）”；
- 元素必须是块级（默认就是）
- 必须显式设置
width（哪怕只是width: fit-content） - 父容器不能是
flex或grid布局（否则要改用justify-content: center）
错误写法：<div style="text-align: center"><div>我不会居中</div></div> —— 外层 text-align 对内层块级 <div> 无效。
<table> 整体居中别用 align="center"，HTML5 已废弃且行为不可靠
<table align="center"> 在 Chrome 可能“看起来”居中，但在 Firefox 或嵌套在 flex 容器里会直接失效，W3C 验证器报错，现代框架（React/Vue）根本不解析它。
可靠方案只有三种：
-
<table style="margin: 0 auto; width: 600px;">—— 最简，但必须设width -
<div style="text-align: center;"><table style="display: inline-table;"></table></div>—— 利用文本流机制，适合窄屏 -
<div style="display: flex; justify-content: center;"><table></table></div>—— 推荐，不用固定宽，IE11+ 兼容
表格单元格内容对齐，只认 text-align 和 vertical-align，其他都过时
<td align="right"> 或 <tr valign="middle"> 这类写法 HTML5 已废弃。浏览器可能还支持，但优先级混乱：Firefox 可能忽略，Chrome 可能覆盖你写的 style，调试时难复现。
正确做法分层控制：
- 全表统一：
td, th { text-align: right; } - 按列控制：
td:nth-child(3) { text-align: center; }（第三列居中） - 按语义加类：
<td class="price">¥299.00</td>+.price { text-align: right; font-family: monospace; }（金额右对齐+等宽字体防小数点错位） -
vertical-align只对<td>/<th>内部内容有效，且需单元格有明确高度支撑才看得出效果
最易被忽略的一点：vertical-align: middle 是默认值，但“居中”是相对于单元格自身高度而言的；如果某行里各单元格高度不一致，视觉上依然参差不齐——这时得靠 min-height 或 line-height 统一基准。
