“正中央”需同时设置text-align: center（水平）和vertical-align: middle（垂直），二者缺一不可；废弃的align/valign属性不可靠，推荐用flex方案应对复杂内容。
表格内容“正中央”包含两个独立维度：水平居中靠 text-align，垂直居中靠 vertical-align；二者必须同时设置，缺一不可。只设一个，看起来就像“偏了”。
水平居中用 text-align: center，不是 align="center"
align 属性在 HTML5 中已完全废弃，验证器报错，部分 WebView 或严格模式下直接失效。浏览器兼容只是历史遗留，不代表它可靠。
- 对单个单元格：
<td style="text-align: center;">文字</td> - 对整列：用
<col class="center-col">+ CSS.center-col { text-align: center; } - 对整张表：给
<table>设text-align: center，但注意它会继承给所有<td>，例外项需单独覆盖 - ⚠️ 坑：如果
<td>里嵌了<div>（display: block），text-align对这个<div>无效 —— 它只作用于行内内容或文本
垂直居中用 vertical-align: middle，不是 valign="middle"
valign 同样是废弃属性，且行为不稳定：它只在 <td> 和 <th> 上“看似生效”，但一旦单元格高度由内容撑开、或被 CSS 高度干预，就容易失效。
- 正确写法：
<td style="vertical-align: middle;">文字</td> - 常见失效场景：
<td>内部有<p>或<div>且未设height/line-height，此时vertical-align无参照基准 - 更稳的替代：把
<td>设为display: flex; align-items: center; justify-content: center;—— 但要注意这会破坏表格语义（如屏幕阅读器识别），仅适用于视觉居中要求极高、且无障碍非首要场景
整个表格在页面中居中，靠 margin: 0 auto 作用于 <table>
margin: 0 auto 对 <td> 或 <tr> 无效，因为它们默认是 display: table-cell / table-row，不响应 margin。只能作用在 <table> 自身上。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配明确宽度：
<table style="width: 80%; margin: 0 auto;">或width: 600px - 若
<table>有width: 100%，margin: 0 auto失效 —— 它已经占满父容器了 - 替代方案（无需预设宽度）：
– 父容器设display: flex; justify-content: center;
– 或父容器设display: grid; place-items: center;
复杂内容（如图片、按钮、多行文本）怎么真正居中？
当单元格里不止纯文本，而是混合元素时，“正中央”需要分层处理：
- 图片默认是行内元素，
text-align: center+vertical-align: middle能让它居中；但如果加了display: block，就得额外设margin: 0 auto（水平）+line-height或 flex（垂直） - 按钮或自定义组件：建议统一用
display: flex; align-items: center; justify-content: center;包裹，避免依赖vertical-align的脆弱性 - 多行文本：
vertical-align: middle只对单行有效；若要多行文字在单元格内垂直居中，推荐display: flex方案，或设line-height≈ 单元格高度（仅限固定高场景）
真正难的不是写哪一行代码，而是判断“居中”的对象是谁：是文字？是图片？是整个单元格？还是整张表？每层都要选对作用目标和 CSS 属性，混用或错配就会白调半天。
