How to vertically align text across browsers

Question

Please note that I have been through the existing links on this topic and none seem to help in my case.

All suggest a way of how to move the text vertically so that it appears aligned. The problem in my case is that it is already aligned in Chrome, so when I try to align the text for Firefox then it misaligns the text in Chrome.

Please open the following link in Firefox (v12) and Chrome (v19).

http://jsfiddle.net/UQ4D5/

You will notice that it is shifted towards the top in Firefox but is perfectly aligned in Chrome.

Solution 1

Two properties in your css

 display: table-cell;
    vertical-align: middle;

Check to live demo http://jsfiddle.net/UQ4D5/5/

Solution 2

Learn to use reset.css or normalize.css for prevent small differences in browser rendering models.

And then use height=line-height trick:

div {
    font-size: 100px;
    text-align: center;
    height: 120px;
    line-height: 120px;
    border: 1px solid black;
}

chrome metrics:

firefox metrics:

Height is the same in both cases.