flex布局实现h5底部tabbar图文上下居中：tabbar容器设display:flex、align-items:center、固定高度；每个tab项内嵌flex column，justify-content:center、align-items:center；图标定宽高，文字用12–14px、line-height:1、text-align:center。
用 Flex 布局实现 H5 底部 TabBar 的图标与文字上下居中，核心是控制垂直方向的对齐逻辑——不是靠 margin 或 line-height 硬调，而是让每个 tab 项内部形成一个独立的垂直弹性容器。
整个 TabBar 容器设为 flex 水平布局 + 垂直居中
底部导航栏本身要作为独立 flex 容器，启用水平排列，并统一控制所有子项的垂直对齐：
- display: flex，主轴为 row（默认），保证图标文字横向排布
- align-items: center，让所有 tab 项在 TabBar 高度内垂直居中（关键！）
- height: 49px 或 60px（按设计稿定），提供明确的高度基准，align-items 才能生效
- 避免用 padding-top/padding-bottom 模拟居中，易受字体行高干扰
每个 tab 项内部再用 flex 实现图文上下居中
单个 tab（含图标 + 文字）需独立处理内部结构，防止文字因 font-size 或 line-height 偏移：
- 给每个 tab 元素（如
<div class="tab-item">）设置 <strong>display: flex</strong> + <strong>flex-direction: column</strong> <li>加 <strong>justify-content: center</strong>，使图标和文字在纵向上居中堆叠</li> <li>加 <strong>align-items: center</strong>，确保图标和文字都水平居中对齐</li> <li>图标用 <code><img>或::before伪元素，固定宽高（如 24px × 24px），避免拉伸变形 - TabBar 高度为 49px 时，文字建议用 12–14px，避免撑开容器
- 显式设置 line-height: 1 或 line-height: normal，禁用浏览器默认 line-height 放大
- 文字用
text-align: center水平居中，配合父级 align-items: center 更稳 - 可加 vertical-align: middle 到 img 元素，消除 inline 元素基线对齐带来的空隙
- 不要给 tab 项设
margin-top或padding-top，它会偏移 flex 的对齐基准 - 父容器（如 body）若没设
min-height: 100vh，小屏下 TabBar 可能被压扁，align-items 失效 - 图标若用 background-image，记得设
background-size: contain和background-position: center - 使用 rem/em 单位时，确认根字体大小未被动态修改（如某些 H5 框架缩放逻辑）
文字字号与行高要配合高度控制
即使 flex 居中了，过大的 font-size 或未重置 line-height 仍会导致文字视觉下沉：
避免常见干扰因素
有些看似无关的样式会悄悄破坏居中效果：
