значок внутри кнопки не центрирован в iphone

Question

Я пытаюсь центрировать иконку внутри кнопки так, чтобы она центрировалась в любом браузере. У меня есть следующий HTML:

<button class="bordered">   
    <i class="icon theme-settings-i"></i>
</button>

в стиле css:

button {
            width: 40px;
            height: 40px;
            outline-color: transparent;
            border-color: grey;
            position: relative;
            border-radius: 0.2em;
            text-align: center;

            .icon {
                font-size: 16px;
                position: relative;
                color: black;
                top: 0.1em;
                display: inline-block;
            }
}

А его центр - настольный Chrome, FF и мобильный Chrome - Opera. Я хочу как-то центрировать его горизонтально в сафари на iphone. Он либо направо, либо налево, что бы я ни пытался.

Answer 1

Я бы использовал этот трюк , чтобы центрировать его по горизонтали и вертикали.(Последний пример на странице)

button {
    width: 40px;
    height: 40px;
    outline-color: transparent;
    border-color: grey;
    position: relative;
    border-radius: 0.2em;
    text-align: center;
      }
        
.icon {
    font-size: 16px;
    position: absolute;
    color: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
      }

<button>   
    <i class="icon">a</i>
</button>

Answer 2

Старайтесь не добавлять разрывы строк и посмотрите результат: например.<button class="bordered"><i class="icon theme-settings-i"></i></button>