Vertical center of text with fixed height and no fixed number of lines

As we all know, the horizontal direction of the center is very good to do, Text-align:center can do; center vertically if the number of lines and the height of the text is fixed also good implementation, but if the number of rows is not fixed?

Recently, a requirement was received: Height fixed, the number of lines of text may be one line, two lines, but no matter how many lines, the text should be vertically centered. For example:

For the H5 page, the CSS3 translate can be done, the principle is the outer div relative positioning, the element inside the absolute positioning, distance from the parent container top value is 50%, and then through the Translate property to move it up 50% relative to itself.

Its CSS is:

For the PC, it's not so good to fool: the low-version browser does not support the CSS3 attribute, so what should we do? One feature of the table is that the content can be vertically centered, no matter how much text is inside. So we can use a table to achieve vertical centering of text, so we can use CSS to simulate the vertical center of the table. And display:table can do: not too low version of IE browser does not support display:table, so in order to be compatible with IE browser, also need to use CSS hack to implement: its CSS is:

In this way, both on the PC, or in the H5 are able to achieve a high level of fixed, the number of lines is not fixed vertically centered.

Vertical center of text with fixed height and no fixed number of lines