ios变通的<button> +带有display：grid的图像的解决方法;

问题描述

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

我们知道有display：grid;还有一些以margin为中心的简单选项：自动，我发现并不是所有元素都可以在每个浏览器中使用。

HTML

link

SCSS

link

我喜欢此按钮及其内部文本开箱即用的居中（特别是垂直居中）的容易程度。但是在我的ipad上，“文字”会分成另一行-图像下方也无缘无故。阅读后，这是因为不支持ios上的display：grid。

我想知道，是否有hack或另一种“ SLICK AND MODERN”方式来构建带有填充，各种文本大小以及其他元素（例如从头开始的图像/图标）的按钮，而无需进行微调以确保文本垂直居中什么浏览器，字体大小。而且没有强迫像素大小或负边距，行高和填充物的原因。

解决方法

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

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;
  }}

所以我发现最好的解决方案是使用包装器，而不是将display：grid应用于按钮，而是将包装器应用于按钮内。

centering css-grid html