HTML5中align和valign属性已被彻底移除，单元格对齐必须用CSS：水平用text-align（设在td/th上），垂直用vertical-align（仅对table-cell有效），或采用flex布局实现可靠居中。
HTML 标签本身不负责对齐，真正起作用的是 CSS。所谓“用 HTML 标签对齐”，本质是误用了已废弃的 align 属性（如 <div align="center">），现代浏览器虽部分兼容，但不推荐、不可靠、无垂直对齐能力。
text-align 只对块容器内的行内内容生效
这是最常被误解的一点：text-align 不控制块级元素自身位置，只控制它内部的文本、<img>、<span> 等行内级内容的水平对齐。
- ✅ 正确用法：
<p style="text-align: right;">这段文字右对齐</p> - ❌ 错误期待：给
<div>加text-align: center想让它自己居中——它不会动，只是里面文字居中 - ⚠️ 注意：
text-align: justify在中文段落中效果有限，词间空隙不自然，需搭配hyphens: auto或分词处理才实用
margin: 0 auto 要求块级 + 固定宽度 + 正常流
这是让一个块（如 <div>、<table>）在父容器中水平居中的经典方式，但三个条件缺一不可。
- 必须是块级元素（默认满足，但若设了
display: inline-block或float就失效） - 必须显式设置
width（max-width不行，width: fit-content在旧版 Safari 中支持差） - 不能脱离文档流（即不能有
position: absolute、float或display: flex子项干扰） - 示例：
<div style="width: 600px; margin: 0 auto;">居中区块</div>
flexbox 的 justify-content 对子元素整体生效
当父容器设为 display: flex，justify-content 控制的是所有直接子元素在主轴（默认水平）上的集体偏移，不是单个元素的“对齐”。
立即学习“前端免费学习笔记（深入）”；
-
justify-content: flex-end→ 所有子项挤到右侧，彼此紧挨 -
justify-content: space-between→ 首尾贴边，中间等距，适合导航栏 - 想单独右对齐某个子项？用
margin-left: auto更直接，且不影响其他子项 - ⚠️ 常见坑：父容器没设
height或min-height，导致align-items: center垂直居中不可见
vertical-align 只在行内/表格上下文起作用
vertical-align 不是“让元素在父容器里垂直居中”的通用方案，它只在两种场景有效：行内元素（inline / inline-block）的基线对齐，或 table-cell 单元格内部对齐。
- ❌ 给
<div>直接加vertical-align: middle—— 完全无效（除非先改display: inline-block） - ✅ 图文混排时：
<img style="vertical-align: middle"><span>文字</span> - ✅ 表格单元格：
<td style="vertical-align: top">顶部对齐内容</td> - ? 替代方案：真要垂直居中，优先用
display: flex+align-items，或display: grid+place-items
真正难的不是选哪种方法，而是识别当前元素的显示类型（block/inline/flex/grid）、是否脱离文档流、父容器是否有约束高度——这些决定了哪个 CSS 属性能起效。写完对齐效果后，用浏览器开发者工具检查 computed styles，比猜更可靠。
