“正中央”需同时设置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> 设 <code>text-align: center，但注意它会继承给所有<td>，例外项需单独覆盖 <li>⚠️ 坑：如果 <code><td> 里嵌了 <code><div>（<code>display: block），text-align对这个<div> 无效 —— 它只作用于行内内容或文本 <h3>垂直居中用 <code>vertical-align: middle，不是valign="middle"valign同样是废弃属性，且行为不稳定：它只在<td> 和 <code><th> 上“看似生效”，但一旦单元格高度由内容撑开、或被 CSS 高度干预，就容易失效。 <ul> <li>正确写法：<code><td style="vertical-align: middle;">文字</td> - 常见失效场景：
<td> 内部有 <code><p></p>或<div> 且未设 <code>height/line-height，此时vertical-align无参照基准 - 更稳的替代：把
<td> 设为 <code>display: flex; align-items: center; justify-content: center;—— 但要注意这会破坏表格语义（如屏幕阅读器识别），仅适用于视觉居中要求极高、且无障碍非首要场景整个表格在页面中居中，靠
margin: 0 auto作用于<table><p><code>margin: 0 auto对<td> 或 <code><tr> 无效，因为它们默认是 <code>display: table-cell/table-row，不响应 margin。只能作用在<table> 自身上。 <ul><li>必须搭配明确宽度：<code><table style="width: 80%; margin: 0 auto;"> 或 <code>width: 600px - 若
<table> 有 <code>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 属性，混用或错配就会白调半天。
