Cross browser vertical center text - html

Question

Question
I'm trying to vertically center a letter with a big font-size cross browser. It's more difficult that what it seems apparently, since every single approach i've tried (line-height, display:table-cell, transform: translate...) fails with big font-size. The problem exist only in OS X.
I've been trying to resolve this behavior problem for quite some time now, here's a solution that works on Safari only:
div {
width: 200px;
height: 200px;
background: #2b2b2b;
text-align: center;
line-height: 200px;
color: #fff;
font-family: helvetica, arial, sans-serif;
font-size: 200px;
}
<div>O</div>
Here's a Codepen with the code.
Here's a result screenshot in OS X 10.10 with both Safari, Chrome and Firefox:
Update
After hours of extensive testing, i've managed to identify the origin of the problem, the font-family helvetica. On windows the font family does not exist, so the font loaded is only arial or a sans-serif. On OS X helvetica is present, but the font-family differs in the three browser. As i removed the font-family, the letter was vertically-aligned by the line-height correctly. But now, i'd love to understand why is this bug present in the first place.
Here's a codepen with the new code: link
div {
width: 200px;
height: 200px;
background: #2b2b2b;
text-align: center;
line-height: 200px;
color: #fff;
font-family: arial, sans-serif;
font-size: 200px;
}
<div>O</div>

Answer 1

Im not sure if this is right, but I removed the line height and added padding instead e.g. padding: 30px 0 0 0; seemed to do it for me. Not entirely sure if this is what you wanted.

Answer 2

try this fiddle code :
http://jsfiddle.net/x25wh1ym/1/
div {
background: none repeat scroll 0 0 #2b2b2b;
color: #fff;
font-family: helvetica,arial,sans-serif;
font-size: 200px;
height: 100vh;
position: relative;
text-align: center;
width: 200px;
}
span {
height: 100vh;
line-height: 100vh;
position: relative;
vertical-align: middle;
}<div><span>O</span></div>