Line-Height Not Vertically Centering Text On Mac But Looks Fine On Windows

I've created a page that displays the size of your browser page. The problem lies with the text displaying the height and width of the browser. While the text aligns perfectly on W

Solution 1:

It seems to be that the line-height of the font you're using is rendered differently as you've already suggested. I tried changing the font-family in the inspector: some fonts work well using the line-height trick, others don't. What about other ways of vertical centring, like this:

<!-- language: lang-css -->
#display {
    /* line-height: 170px; */
    /* height: 170px; */
    display: table;
    [...]
}

#width, #height {
    /* float: left; */
    /* height: 100%; */
    display: table-cell;
    vertical-align: middle;
}

No doubt, you'll need to fix some other styling, but this can be an effective way of doing the same thing but not relying on line-height.

Reference: http://css-tricks.com/centering-in-the-unknown/