vertical-align对div嵌套无效，因其仅作用于行内级元素（如inline、inline-block、table-cell），而div默认为块级元素；可靠方案包括：1.外层设display:table-cell并配vertical-align:middle；2.外层设display:flex并用align-items:center；3.绝对定位+transform:translatey(-50%)。
为什么 vertical-align 对 div 嵌套无效
因为 vertical-align 只对行内级元素（inline、inline-block、table-cell）生效，对默认的 div（块级元素）完全不起作用。很多人在 div 里套 div 后加 vertical-align: middle，结果毫无反应——不是写错了，是根本用错了上下文。
让嵌套内容垂直居中的三个可靠方案
取决于你嵌套的是什么、是否已知高度、是否要兼容老浏览器：
- 若外层是
display: table-cell，内层任意元素加vertical-align: middle即可生效（兼容 IE8+） - 若外层设为
display: flex，直接用align-items: center（现代主流方案，简洁可靠） - 若内层元素高度固定，可用绝对定位 +
transform: translateY(-50%)（需配合top: 50%）
注意：vertical-align 在 td 或 th 中默认就有效，因为表格单元格天然是 table-cell 行为；但一旦你在 td 里再嵌一层 div，那这个 div 就又变回块级了，必须显式设 display: inline-block 或改用 flex。
vertical-align 在 inline-block 嵌套中的实际表现
当两个 span 或 div 都设了 display: inline-block，它们会按基线（baseline）对齐，而不是视觉中心——这就是为什么文字旁放个小图标常“吊着”不齐。解决方法：
- 统一设
vertical-align: top/middle/bottom - 避免混用含文字和纯图标的
inline-block元素（文字自带下降部，会拉低对齐基准） - 给父容器加
font-size: 0消除空白符导致的间隙，再单独给子元素设字体大小
表格单元格（td）里嵌套内容怎么垂直居中
直接在 td 上写 vertical-align: middle 就够了，不需要动里面的内容。但如果里面嵌了 div 且你想控制它的内部对齐，就得看情况：
- 如果
div是inline-block：继承td的vertical-align，可直接设值 - 如果
div是block：vertical-align对它无效，得改用display: flex或position: absolute - 不要在
td上同时写valign="middle"和 CSSvertical-align，后者会覆盖前者，且 HTML 属性已废弃
最易被忽略的一点：嵌套越深，越容易误以为「对齐是层层继承的」；实际上 vertical-align 只作用于当前元素与其兄弟元素的行内上下文，跟父容器的尺寸或位置无直接关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
