当父容器采用 vertical-align 无法使子元素真正垂直居中时，应改用 Flexbox 布局：只需将父元素设为 display: flex 并设置 align-items: center，即可让子元素在其高度方向上自动居中，无需预知具体尺寸。
当父容器采用 `vertical-align` 无法使子元素真正垂直居中时，应改用 flexbox 布局：只需将父元素设为 `display: flex` 并设置 `align-items: center`，即可让子元素在其高度方向上自动居中，无需预知具体尺寸。
vertical-align 并非用于常规父子块级元素的对齐控制，而仅在行内上下文（如 inline-block、表格单元格或文本行内）中生效。在你原始代码中，虽然 #parent 和 #child 都设为 inline-block，但 vertical-align: middle 对子元素的作用是相对于其所在行框（line box）的基线对齐，而非相对于父容器自身高度——这正是导致“看似失效”的根本原因。
现代、可靠且语义清晰的解决方案是使用 Flexbox：
#parent {
display: flex;
align-items: center; /* 垂直居中（主轴为水平时，此属性控制交叉轴对齐） */
justify-content: center; /* 可选：如需水平居中，可同时添加 */
height: 1em;
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>
✅ 优势说明：
- 不依赖固定高度或
position: absolute+transform等 hack 方式； - 自动适配动态内容与响应式场景；
- 支持子元素尺寸大于父容器（如示例中
2em > 1em），居中逻辑依然健壮； - 语义明确，可维护性强。
⚠️ 注意事项：
- 确保父元素有明确的高度（如
height: 1em或min-height），否则align-items: center在无约束高度下可能表现不可预期； - 若父容器需保持
inline-block的流内行为（例如与其他内联元素并排），可在 Flex 容器外层再包裹一层inline-block元素，或直接对#parent设置display: inline-flex； - 旧版浏览器（如 IE9 及以下）不支持 Flexbox，若需兼容，可考虑
table-cell方案作为降级（但推荐优先使用现代方案并配合渐进增强策略）。
总之，面对未知高度下的垂直居中需求，Flexbox 是目前最简洁、可靠且标准化的解决方案。
