text-align仅对块级元素和表格单元格内的行内内容生效，vertical-align仅对行内级元素和表格单元格有效；二者均不能直接实现块级元素在父容器中的垂直居中，应使用Flex或Grid布局。
text-align 只对块级元素和表格单元格生效
text-align 控制的是**行内内容在容器内的水平对齐方式**，但它不会让块级元素本身居中，也不会影响子元素的垂直位置。常见误解是给 div 设置 text-align: center 就能让里面所有内容（包括图片、按钮）水平居中——这确实有效，但仅限于这些内容是行内级（inline 或 inline-block）时。
如果子元素是 display: block（比如另一个 div），text-align 对它完全无效；此时需用 margin: 0 auto 或 Flex 布局。
-
text-align: left / right / center / justify都只作用于当前元素的**文本流和行内子元素** - 表格中，
text-align在td或th上控制单元格内文字的水平对齐，不影响单元格自身在表格中的位置 - 在
flex容器里设置text-align没有意义，因为主轴对齐由justify-content控制
vertical-align 不是给父容器用的，只对行内级元素和表格单元格起作用
vertical-align 经常被误认为是“让子元素在父容器中垂直居中”，但它实际作用对象非常有限：它只影响**处于同一行框（line box）内的行内级元素（inline、inline-block、inline-table）或表格单元格（td/th）**，且是对齐到该行框的基线（baseline）、顶部、底部等参考线，不是相对于父容器高度。
所以给一个普通 div 设置 vertical-align: middle 是无效的——它既不是行内元素，也不在行框中。
立即学习“前端免费学习笔记（深入）”；
- 在图片与文字混排时，
vertical-align: middle能让图片中点对齐文字 x-height 中间，避免默认 baseline 对齐导致的底部留白 - 在
table-cell元素上设vertical-align才真正实现单元格内容的垂直居中 -
vertical-align的值如top、bottom、middle、baseline、text-top等，参考基准不同，middle并非容器中点，而是字符 x-height 的中间
想真正垂直居中？别硬套 vertical-align
当需要让一个块级元素（比如卡片、弹窗）在其父容器中垂直+水平居中时，vertical-align 和 text-align 都不是正解。它们的设计目标从来就不是解决这种布局问题。
现代可靠方案是：
- 父容器设
display: flex，再加justify-content: center+align-items: center - 父容器设
display: grid，再加place-items: center - 绝对定位 +
transform: translate(-50%, -50%)（需先设position: relative在父级）
下面是一个 Flex 方案的最小可用示例：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 1px solid #ccc;
}
.box {
width: 100px;
height: 100px;
background: #4a90e2;
}
兼容性与常见失效场景
text-align 兼容性极好，IE6+ 都支持；vertical-align 在 IE8+ 表现基本一致，但在 IE7 及更早版本中，对 inline-block 的支持不完整，容易错位。
最容易踩坑的组合是：给父 div 设了 text-align: center，又给子 div 设了 vertical-align: middle，结果什么都没发生——因为子 div 默认是 block，vertical-align 根本不生效，而 text-align 又管不了它的垂直位置。
遇到对齐异常，优先检查两件事：
— 当前元素的 display 值是否属于 vertical-align 的作用范围？
— 你真正想对齐的是“行内内容”还是“块级容器”？选错属性，后面调半天也没用。
