text-align仅对块级容器生效，须作用于父元素如等；块级元素自身水平居中应使用margin: 0 auto并设width；表格整体居中推荐flex方案，单元格内容对齐用text-align/vertical-align。
text-align 只对块级容器生效，别乱加在 <span></span> 或 <img> 上
给 <span></span> 写 style="text-align: center" 没用——它不是块级元素，text-align 根本不作用于它。真正起效的位置是它的父级块容器，比如 <p></p>、<div>、<code><th> 或 <code><td>。
<p>常见失效场景：</p>
<ul><li>把 <code>text-align 加在 <img> 上：图片本身不会居中，得加在它的父 <p></p> 或 <div> 上
<li>父容器用了 <code>display: flex：此时 text-align 被 justify-content 覆盖，视觉上“失灵”
<p></p> 里嵌了 <div>：文字能居中，但那个 <code><div> 会独占一行，不受 <code>text-align 影响
整块元素（如 <div>、<code><table>）水平居中用 <code>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> 无效。
<h3><code><table> 整体居中别用 <code>align="center"，HTML5 已废弃且行为不可靠
<table align="center"> 在 Chrome 可能“看起来”居中，但在 Firefox 或嵌套在 <code>flex 容器里会直接失效，W3C 验证器报错，现代框架（React/Vue）根本不解析它。
可靠方案只有三种：
<table style="margin: 0 auto; width: 600px;"> —— 最简，但必须设 <code>width-
<div style="text-align: center;"><table style="display: inline-table;"></table></div>—— 利用文本流机制，适合窄屏 -
<div style="display: flex; justify-content: center;"><table></table></div>—— 推荐，不用固定宽，IE11+ 兼容 - 全表统一：
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>/<code><th> 内部内容有效，且需单元格有明确高度支撑才看得出效果 <p>最易被忽略的一点：<code>vertical-align: middle是默认值，但“居中”是相对于单元格自身高度而言的；如果某行里各单元格高度不一致，视觉上依然参差不齐——这时得靠min-height或line-height统一基准。
表格单元格内容对齐，只认 text-align 和 vertical-align，其他都过时
<td align="right"> 或 <code><tr valign="middle"> 这类写法 HTML5 已废弃。浏览器可能还支持，但优先级混乱：Firefox 可能忽略，Chrome 可能覆盖你写的 <code>style，调试时难复现。
正确做法分层控制：
