IE/ME下Bootstrap 4 Flex实现按钮文字垂直居中问题排查

这个问题是IE和旧版Edge（EdgeHTML内核）对<button>元素作为flex容器的兼容性处理差异导致的。

Chrome和Firefox完全遵循Flexbox标准，当你给<button>加上d-flex类后，即便默认的align-items值是stretch，浏览器对按钮元素的内置样式（比如默认行高、垂直对齐规则）也会让内部文字呈现出垂直居中的效果；但IE和旧版Edge在处理<button>作为flex容器时，会忽略这些隐含的垂直对齐逻辑，直接让内部内容靠顶部显示。

修复方法 #

只需要给你的按钮添加Bootstrap的align-items-center类，显式指定flex容器在垂直方向上的对齐方式，就能在所有浏览器中实现文字垂直居中的效果：

修改后的HTML代码：

<div class="container">
  <button class="w-100 f-default-f btn btn-primary d-flex justify-content-between align-items-center px-3">
    <div>Text</div>
    <div>icon</div>
  </button>
</div>

补充说明 #

如果你需要更细致的局部控制，也可以给按钮内部的<div>元素单独添加align-self:center类，但直接给flex容器（按钮）设置align-items-center是更简洁的全局方案，能确保所有子元素都统一垂直居中。

内容的提问来源于stack exchange，提问作者Troyer