text-align控制块容器内行内内容水平对齐，vertical-align仅对inline、inline-block或table-cell元素生效；两者作用对象与条件截然不同，不可混用。
text-align 控制内部行内内容水平对齐，vertical-align 控制行内/表格单元格内垂直对齐，两者作用对象和生效条件完全不同，不能混用。
text-align 只对块容器内的行内内容起效
它必须写在父元素上（如 <div>、<td>、<p>），且只影响其直接子级中的行内内容（文本、<span>、<img> 默认为行内）。
-
text-align: center让文字或图片“看起来”居中，但不会移动<div>这类块级子元素本身 - 如果单元格里有
<div style="display: block;">，仅设text-align: center无效——得给这个<div>自己加margin: 0 auto或display: flex; justify-content: center - 整表统一设置：写
td, th { text-align: right; }；按列控制：用td:nth-child(3) { text-align: right; }
vertical-align 不是给父容器用的，只作用于特定 display 类型
vertical-align 对 <div>、<p> 等默认 display: block 的元素完全无效。它只对以下三类有效：
-
display: inline或inline-block元素（如<img>、<span>） -
display: table-cell元素（即<td>、<th>） - 表格相关 display 值（
table-row等不支持） - 值必须是
top、middle、bottom、baseline—— 写center会彻底失效
表格整体居中不是靠 align 属性
别写 <table align="center">，HTML5 已废弃，W3C 验证器报错，Chrome/Firefox 行为不一致，flex 容器里直接失效。
立即学习“前端免费学习笔记（深入）”；
- 可靠做法只有三种：
<table style="margin: 0 auto; width: 80%;">（必须设width） <div style="text-align: center;"><table style="display: inline-table;"></table></div>-
<div style="display: flex; justify-content: center;"><table></table></div>（推荐，无需固定宽）
表单 label 和 input 对不齐？问题不在 margin
默认错位是因为 <label> 和 <input> 基线不同，vertical-align: baseline 是罪魁祸首。
- 最稳解法：把每组
<label>+<input>包进一个<div class="form-row">，然后设.form-row { display: flex; align-items: center; } - 全局补救：给所有表单控件加
vertical-align: middle，并确保父容器没干扰性的line-height - 别用
float布局表单——脱离文档流后对齐更难控，响应式也崩
真正容易被忽略的是：对齐效果是否生效，取决于你写的样式作用在哪个元素上、该元素的 display 是什么、以及它的子元素类型。写错一层，就全白搭。
