带显示器的平滑<button> +图像的ios变通方法:网格；

Question

众所周知，在过去的html+css中，没有定义像素大小和一些数学技巧的垂直居中对我们来说是一个巨大的问题。

正如我们所知道的，有display:grid和一些简单的选项来居中:自动，我发现并不是所有的元素都可以在每个浏览器上使用。

请参阅此演示代码：https://jsfiddle.net/2dz7w6L4/

HTML

   <button>
   <img src="https://dummyimage.com/64x64/ff00ff/ffffff.png&text=X">
   <label>Centered Text</label>
   </button>

SCSS

   button{
     border:0; outline:0; margin:0; padding:0;
     padding:1em 1.5em;
     cursor: pointer;

     background-color: green;

     display: grid;
     grid-template-columns: auto auto;
     grid-gap: 1em;

     label{
       font-size: 200%;
       margin: auto;
     }

     img{
       margin: auto;
     }

     &:hover{
       background-color: red;
     }

   }

我喜欢这个按钮的简单居中(特别是垂直居中)，以及它的开箱即用文本。但在我的ipad上，文字会被换成一行--图片下面也是如此，没有任何原因。阅读后，这是因为ios不支持display:grid。

我想知道，是否有一种技巧，或者另一种巧妙和现代的方法来构建带有填充的按钮，各种文本大小，以及从头开始的图像/图标等附加元素，而不需要精确调整以确保文本垂直居中，而不管是哪种浏览器、字体大小。当然，不会强制使用像素大小或负边距、行高等内容。

Answer 1

最好的解决方案是支持所有设备

HTML：

<button class="btn">
        <img src="asset/img/btn.jpg" alt="" class="btn__img">
        <label class="btn__title">center</label>
</button>

SCSS：

.btn {
 position: relative;
 text-align: center;
 border:0; outline:0; margin:0; padding:0;
 padding:1em 1.5em;
 cursor: pointer;
 background-color: green;
&__img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

&__title {
    font-size: 200%;
}
&:hover{
    background-color: red;
  }}

Answer 2

所以我找到的最好的解决方案是使用一个包装器，而不是将display:grid应用于按钮，而是应用于按钮内部的包装器。