Text Positioning in Safari - html

Question

I've encountered a strange issue with text positioning in Safari for buttons on a site I've been working on.
1. Is it possible to keep the text center aligned on the buttons while using left: ...; ? Would this fix the issue?
2. Would placing span in a relatively placed div .text-pos with a sub-class .text-pos span ... position: absolute; be bad form? Would it fix the issue?
Code:
.button a span {
z-index: 2;
width: 100%;
position: absolute;
top: 12%;
color: #000000;
text-align: center;
font-size: 4vmin;
}
.button a img {
height: 100%;
display: flex;
}
<div class="button antiques">
<a href="/landing/gallery/antiques/antiques.html">
<img alt="antiques" src="/assets/img_style/plank.png">
<span>ANTIQUES</span>
</a>
</div>
Did not include left: ...; as the text needs to be center aligned on the button.
Result(too new to post images):
http://i.imgur.com/3E55EMH.png
My first thought was that the issue was with vmin, but:
1- Text scales appropriately with browser adjustments.
2- Text on the hover(upper left image frame) also uses vmin, but is
appropriately positioned.
In reference to point two, the text is placed in a relatively positioned div container to force aspect ratio like so:
<div id="wide-container"> /* position: relative; */
<div id="content"> /* position: absolute; */
...
</div>
</div>
I don't have ready access to an OSX machine so any input would be appreciated!
Open minded to any other approaches you may have to offer. Thank you (:
SOLVED
.button {
height: 6vmin;
margin-top:1.5vmin;
margin-bottom:1.5vmin;
position: relative;
}
.button a {
height: 100%;
}
.button:before a {
content: "";
display: block;
}
.button a span {
z-index: 2;
position: absolute;
top: 9%;
bottom: 0;
left: 0;
right: 0;
text-align:center;
width: 100%;
height: 100%;
color: #000000;
font-size: 4vmin;
}

Answer 1

Found the solution by setting the button to be relatively positioned while leaving the text position as absolute. Solution outlined in more detail in the edited question.
The problem came from my misunderstanding of how browsers treat the box model differently. Safari seemed to be taking the contained elements and floating them left individually since the the image had no positioning attributes.
This solution displays more or less the same on Chrome, Firefox, and Safari.