子菜单项垂直不居中，根本原因是父容器display为block导致vertical-align无效；必须改用flex（align-items:center）或grid（place-items:center）布局，且需确保父容器有明确高度约束或合理网格轨道定义。
子菜单项在垂直方向上不居中？先看容器 display 类型
子菜单项（比如 <li> 或 <button></button>）是否能垂直居中，取决于它的直接父容器用了什么布局模型。常见错误是把子菜单塞进一个 display: block 的 <ul></ul> 里，再指望 vertical-align: middle 生效——它对 block 元素完全无效。
真正起作用的只有三种情况：
- 父容器是
display: table-cell，且设了vertical-align: middle（已淘汰，不推荐） - 父容器是
display: flex，子元素用align-items: center或justify-content: center - 父容器是
display: grid，用place-items: center或align-items: center; justify-items: center
现代多级菜单几乎都用 <ul><li></ul> 嵌套，而 <ul></ul> 默认是 block，所以必须显式改掉它的 display 才能触发垂直居中逻辑。
Flex 布局下子菜单项垂直居中要加 height 或 line-height 吗？
不一定。如果子菜单项是单行文字按钮（比如 <button>菜单项</button>），且父容器已设 display: flex; align-items: center;，那只要父容器有明确高度约束（如 height: 48px 或 min-height: 48px），文字就会自动垂直居中——不需要额外设 line-height。
立即学习“前端免费学习笔记（深入）”；
但容易踩的坑是：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 父容器没设高度，只靠内容撑开，
align-items: center看不出效果 - 子元素本身有
padding-top/padding-bottom不均等，视觉上偏移 - 用了
font-size极大或极小的文字，导致基线位置浮动，建议统一用box-sizing: border-box+ 固定height
示例写法：
.submenu {
display: flex;
flex-direction: column;
height: 200px;
}
.submenu-item {
display: flex;
align-items: center;
padding: 0 16px;
height: 40px;
}
绝对定位子菜单时，怎么让其中的按钮垂直居中？
当子菜单用 position: absolute 展开（比如 hover 下拉），里面的按钮默认是块级流式排列，顶部贴齐。想让每个按钮在自身高度内垂直居中，不能靠父容器的 top: 50%，而是要对按钮自身处理：
- 按钮设
display: flex; align-items: center; height: 44px;—— 最稳 - 按钮设
line-height: 44px;—— 仅限单行文本，换行就失效 - 按钮设
display: table-cell; vertical-align: middle;—— 兼容老浏览器，但语义混乱、易和外层 flex 冲突
特别注意：如果按钮里含图标 + 文字，且用了 vertical-align: middle 对齐图标，务必确认图标是 inline 元素（如 <svg></svg> 默认是 inline），否则 vertical-align 不生效。
Grid 布局做多级菜单时 place-items: center 会撑满整个容器吗？
不会。place-items: center 只控制子元素在其网格单元内的对齐方式，不影响网格轨道大小。但如果子菜单容器本身是 display: grid，且只有一列一行（比如 grid-template: 1fr / 1fr），那子元素就会被“撑满”——这不是 place-items 的问题，而是网格轨道定义太粗放。
正确做法是：
- 用
grid-template-rows: auto;配合gap控制间距，避免自动拉伸 - 子菜单项设
justify-self: center;而非依赖place-items，更精细 - 如果菜单项需要固定高度（如 40px），直接给
min-height: 40px，比靠 grid 自动计算更可靠
复杂点在于：多级菜单常需响应式折叠/展开，grid 在动画高度变化时不如 flex 平滑，容易闪动。真要用 grid，建议搭配 max-height + overflow: hidden 动画，而不是依赖 grid 行高自适应。
