text-align: center最直接，需作用于块级父容器以居中其内部行内文字；flex布局适用于整个子节点盒子居中；绝对定位+transform适合弹出式二级菜单居中。
子节点文字居中：用 text-align: center 最直接
树状菜单里最常见的“子节点”是文字（比如 <span></span>、<a></a> 或 <li> 里的文本），它们默认是行内内容。想让这些文字在父 <li> 或 <ul></ul> 容器里水平居中，只需给父容器加 text-align: center。
常见错误现象：给子节点自己加 margin: 0 auto 或 text-align: center —— 没用，因为行内元素不响应 margin 的 auto 值，且 text-align 必须作用于**包含它的块级父容器**。
- 父容器必须是块级（如
<li>默认就是）；如果用了display: inline-block或float，先确保它能接受text-align - 若子节点是图标（
<svg></svg>、<i></i>），也适用同一规则，但需确认其display是inline或inline-block - 这个方法只管水平方向；垂直方向靠
line-height或padding调整，单行推荐设line-height等于容器高度
整个子节点盒子居中：用 Flex 布局最可靠
当子节点本身是个块级结构（比如带边框的 <div>、含多个子项的 <code><button></button>），需要把它整个“盒子”在父容器里水平+垂直居中，display: flex 是首选。
别在 <ul></ul> 或 <li> 上直接套 display: flex —— 它会破坏树状菜单的默认流式嵌套结构，导致缩进、箭头、折叠逻辑错乱。
- 只对具体要居中的子容器（如
<div class="submenu-item">）的**直接父元素**设 <code>display: flex; justify-content: center; align-items: center - 确保该父元素有明确高度（否则
align-items: center无效），比如设height: 40px或min-height: 40px - 避免在树状菜单根
<ul></ul>上用display: flex，否则所有<li>变成 flex item，margin-left缩进失效，层级关系丢失 - 触发项（如
<li class="has-submenu">）必须设position: relative - 子菜单（
<ul class="submenu"></ul>）设position: absolute; top: 100%; left: 50%; transform: translateX(-50%)—— 这样它水平中心点对齐触发项中心 - 若需垂直居中（比如下拉菜单居中显示在触发项正下方），则改用
top: 50%; transform: translateY(-50%)，但注意这要求父触发项有明确高度 - 别漏掉
white-space: nowrap或min-width，否则长文本撑宽导致居中偏移 - 水平居中文字：坚持用父容器
text-align: center，兼容性无压力 - 水平居中块级子节点：给子节点设
display: inline-block，再给父容器设text-align: center；注意清除inline-block间的空白符（用注释或font-size: 0） - 垂直居中：只能靠
line-height（单行）或vertical-align: middle+ 伪元素（需额外 DOM 开销），不要尝试margin-top: 50%—— 它在 IE9 中行为不稳定
绝对定位子节点居中：适合弹出式二级菜单
树状菜单中常有悬停展开的二级菜单（<ul></ul>），它们脱离文档流、需要精确居中对齐到触发项下方或右侧。这时不用 flex，而用 position: absolute + transform。
典型错误：只写 top: 100% 和 left: 0，结果贴着左上角展开，不是“居中对齐”到父菜单项。
IE9 兼容场景：慎用 margin: 0 auto，优先选 text-align + inline-block
老项目仍需支持 IE9 时，flex 不可用，transform 仅部分支持。此时让子节点居中，得回归更保守的组合。
关键限制：IE9 不支持 display: flex，也不支持 transform: translate() 的 y 轴偏移（translateY 会失效）。
真正容易被忽略的是树状菜单的“层级缩进”和“居中”的冲突：一旦你给某层 <li> 加了 display: flex 或 text-align: center，它的子菜单（<ul></ul>）可能因继承或 flex 重排而错位。务必只在明确需要居中的那个节点上动手，而不是整棵树统一处理。
