How to vertically align text across browsers

问题

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.

回答1:

Two properties in your css

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

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

回答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.

回答3:

The issue is based on the Browser default Stylesheets. I recommend you to use a proper reset Stylesheet or even normalize.css

来源：https://stackoverflow.com/questions/10793503/how-to-vertically-align-text-across-browsers