Css iphone中按钮内的图标未居中

我试图将按钮内的图标居中，使其在各种浏览器中居中。 我有以下html：

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

---

其中心是桌面chrome、FF和移动chrome、Opera。我想把它水平地放在iphone的safari里。无论我怎么做，它要么向右，要么向左。

尝试不添加换行符，然后查看结果：例如。

---

尝试不添加换行符，然后查看结果：例如。

我会用它水平和垂直居中。（本页最后一个示例）

按钮{
宽度：40px；
高度：40px；
轮廓颜色：透明；
边框颜色：灰色；
位置：相对位置；
边界半径：0.2米；
文本对齐：居中；
}
.图标{
字体大小：16px；
位置：绝对位置；
颜色：黑色；
最高：50%；
左：50%；
转换：转换（-50%，-50%）
}

A.

我将使用它水平和垂直居中。（本页最后一个示例）

按钮{
宽度：40px；
高度：40px；
轮廓颜色：透明；
边框颜色：灰色；
位置：相对位置；
边界半径：0.2米；
文本对齐：居中；
}
.图标{
字体大小：16px；
位置：绝对位置；
颜色：黑色；
最高：50%；
左：50%；
转换：转换（-50%，-50%）
}

A.

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