当父容器高度未知或动态变化时，传统 vertical-align 无法可靠实现子元素垂直居中；推荐采用 Flexbox 布局，通过 display: flex + align-items: center 即可简洁、健壮地达成垂直居中效果，且无需预知尺寸。
当父容器高度未知或动态变化时，传统 `vertical-align` 无法可靠实现子元素垂直居中；推荐采用 flexbox 布局，通过 `display: flex` + `align-items: center` 即可简洁、健壮地达成垂直居中效果，且无需预知尺寸。
vertical-align 并非为常规父子布局设计的垂直对齐工具——它仅在行内级上下文（如 inline-block 元素位于同一行内、或表格单元格中）生效，且作用对象是元素的基线或行框，而非父容器的内容高度。因此，在你的原始代码中，即使为 #parent 设置 vertical-align: top、为 #child 设置 vertical-align: middle，由于二者均为块级嵌套结构（且无行内格式化上下文支撑），该声明实际被忽略，子元素仍按默认文档流顶部对齐。
✅ 正确解法：使用 Flexbox
将父容器设为弹性容器，并启用交叉轴居中：
#parent {
display: flex;
align-items: center; /* 垂直居中（Y轴） */
justify-content: center; /* 可选：如需水平居中，添加此行 */
height: 1em; /* 支持任意高度：em、rem、vh、auto 等 */
width: 20px;
background-color: rgba(100, 100, 100, 0.2);
}
#child {
height: 2em; /* 子元素可高于父容器 — Flexbox 自动居中，不溢出截断 */
width: 5px;
background-color: blue;
}<div id="parent"> <div id="child"></div> </div>
? 关键优势说明：
- ✅ 高度无关性：无论
#parent是1em、100px还是min-height: 3rem，align-items: center始终基于其实际内容高度（content box）计算居中位置； - ✅ 子元素自由伸缩：即使
#child的height: 2em超过父容器，Flexbox 仍精确以其自身尺寸为基准完成居中（视觉上居中于父容器可用空间）； - ✅ 无需绝对定位或 JS 计算：告别
position: absolute+top: 50%+transform: translateY(-50%)的冗余写法； - ⚠️ 注意：确保父元素有明确高度（或能生成高度的子内容），否则
height: auto下若无其他约束，可能表现为“零高”，导致居中不可见——这是布局逻辑前提，而非 Flexbox 缺陷。
? 进阶提示：若需兼容老旧浏览器（如 IE10+），可添加 -ms-flexbox 前缀；但现代项目强烈建议以标准 display: flex 为主，并通过 Can I use 确认目标环境支持度。Flexbox 已成为垂直居中的事实标准方案，简洁、语义清晰、维护成本低。
