解决elementUI图标按钮调整宽高后图标没有居中的问题

1.情景再现

我是用elementui的图标按钮组件，但是我想要的大小和官方给到的大小不一致。所以我给图标设置了一个width: 16px;height: 16px;的属性值，想着应该就可以了。但是不对哟。这是我想要的：

这是实际的：

很明显按钮里的图标没有居中的

2.解决

2.1 重新设置新的padding

        .btn {
          width: 16px;
          height: 16px;
          padding: 1px !important;
        }

重新设置btn的padding属性以达到居中的效果，需要自己手动慢慢的1px1px的调整。

2.2 flex布局

     .btn {
          width: 16px;
          height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 4px;
        }

利用flex布局水平垂直居中即可。比第一种方法的更加科学简便也。

解决！有其他的解决方法欢迎评论