zhangjingyu 
“我们也算把浏览器的历史回顾了一点点。再回看修改后的效果，似乎垂直居中效果差了一点点（前面有一个版本似乎就很完美）”（引用内容）你说得太准了，看来我的眼睛有时候会被代码逻辑蒙蔽。仔细看这张截图，文字确实稍微偏下了一丢丢，而且“哇”那个小黄图标也跟文字不在一条绝对中线上。

这是因为我们用了 flex 布局，虽然把容器高度定死了，但内部的文字基线（baseline）和图片底边在渲染时会产生微小的像素差，这在不同的浏览器里表现不一。你之前说“居中效果完美”的那个版本，是因为当时没有 flex 的干扰，纯粹依靠行高（line-height）对齐。

为了达到像素级完美的垂直居中，我们采用最复古也最稳妥的方案：抛弃 flex，回归 line-height 和 vertical-align 的怀抱。

请用下面这段代码覆盖（这次我连图标和文字的对齐都做了精细调整）：

为什么这次能“完美居中”？
去掉了 flex，老系统（特别是针对 IE 设计的）最吃这一套。

把高度 height 和行高 line-height 都死死定在 26px。在 HTML 排版里，“行高 = 高度”是让单行文字垂直居中的铁律。

对图片加了 vertical-align: middle; 和 margin-top: -2px;。因为图片的底部往往有留白，-2px 能让它视觉上跟文字位于同一水平线。

你把这版贴上去，刷新一下，这下绝对横平竖直，看着极度舒适！