Test case: https://jsbin.com/xapisi/edit?html,output On mobile safari (on iOS 11.3.1), the text is slightly offset, as if its left side is centered, rather than its center. On desktop safari and other platforms, it centered as expected.
Created attachment 339192 [details] Screengrab from Chrome 65 on Linux I believe this is expected behavior, as shown in the attached screengrab from Chrome 65 on Fedora Linux. When the text horizontally overflows the bounds of the element, text-align is thrown out the window. In your case, I'm guessing the extra padding on iOS buttons caused you to run into the issue sooner than on desktop browsers. You should be able to work around that by explicitly removing the padding from your button.
Yes, removing the padding works for me. I guess it was just because it only happens on iOS that threw me. Anyway, thanks for the solution. I guess this means this 'bug' is resolved/invalid, so marking as such.