CSS examples for vertically centering text in one or multiple lines

In the era of table layout, there is no need to think too much about vertical centering. In cells, the default is vertical centering. One line of text is vertically centered, and three lines of text will also be vertically centered. Perform CSS web page layout so that the form is changed. The text is positioned at the top of the container by default.

As shown below:

In this case, how to vertically center the text? Divided into three situations:

1. If it is a single line of text, you can use line spacing to solve the problem.

We add the definition of line spacing to it to get the effect of vertically centering a single line of text.

2. If it is multi-line text, the parent container does not have a fixed height.

We can use padding to solve the problem.

Set the padding of the container to the same fixed value, and the height of the container increases as the content increases.

Use this to achieve vertical centering of multi-line text.