CSS does not seem to provide us with a simple method to center uncertain rows of text.
If we only have one line of text, we can set the height to be equal to the row height to solve this problem.
However, if we do not know how many lines there are, the number of lines of text is a variable, and no matter how many lines we need, we need to vertically center the text in the box, I am afraid it is a little difficult to use css...
If you have used a table layout, you must remember its convenient vertical center settings.
Yes, it's just using tables. nested tables in DIV. No one specifies that tables cannot be used for DIV + CSS layout.
<Style type = "text/css">
. Test {
Height: 300px;
Width: 300px;
}
</Style>
<Div class = 'test'> center </div>
Then we can
<Div class = "test"> <table width = "100%" height = "100%" border = "0" cellspacing = "0"> <tr> <td> the class is displayed here content of "test" </td> </tr> </table> </div>
In this case, whatever input or output in td is vertically centered because it is in the table.
From: gaohui blog