This method is mainly applicable to text height uncertainty, which may be one or more lines of text.
There are two implementation methods: the first is the antique browser, IE6/7, and the second is the modern browser IE8/9/FF/chrome.
IE6/7 requires three element layers:
The outer layer is the package layer. It can also be a Module layer. The required attribute is position/height,
The middle layer is the offset layer, and the required attribute is position/top: 50%,
The inner layer is the text layer, and the required attribute is position/top:-50%.
Set the offset of top 1, positive and negative to ensure that the text layer is always in the middle.
IE8/9/FF/Chrome does not need to be so troublesome. It only requires two layers,
The outer layer is also the package layer, and the required attribute is: Display: table,
The inner layer is the text layer, which can directly contain text. required properties: Display: Table-cell/vertical-align: middle,
Only three attributes are required.
Instance code:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> <HTML>