Line-Height does not vertically center text on a Mac, but looks great on Windows

Question

I created a page displaying the size of your browser page. The problem is that the text displays the height and width of the browser. Although the text is perfectly aligned on Windows computers, they look very disconnected when viewed on Mac computers. It is also worth noting that this problem occurs when using an external resource ( http://fonts.com ) to create the desired Rockwell Extra Bold font.

Link to the site: http://howbigismybrowser.com/

The essential CSS of the container containing the text is as follows:

#display: { background: #232323; border: 15px solid #fff; color: #fff; font-family: 'Rockwell W01 Extra Bold', Arial, sans-serif; font-size: 4.063em; text-align: center; height: 170px; line-height: 170px; margin-left: auto; margin-right: auto; position: relative; z-index: 2; } 

Update:

'display: table', but for some reason the font has extra space at the bottom. This does not seem to be an additional field or addition.

Answer 1

It seems that the line-height of the font you are using is displayed differently, as you said. I tried changing the font family in the inspector: some fonts work well using a linear-height trick, others do not. What about other vertical centering methods, for example:

 <!-- language: lang-css --> #display { /* line-height: 170px; */ /* height: 170px; */ display: table; [...] } #width, #height { /* float: left; */ /* height: 100%; */ display: table-cell; vertical-align: middle; } 

Sure, you need to fix some other style, but it can be an effective way to do the same, but not rely on line height.

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