Research on horizontal vertical center of multi-line text

The previous day I saw an article in W3CPlus about using CSS to create a horizontal vertical center.Point 6Some minor problems are found:

For the first point, the solution is to use the before pseudo element:

Horizontal vertical center multi-line text Center

 

Demo attached

But! We also noticed that the text is wrapped in a line break.

This is the gap that inline-block creates.

To solve this problem, try this hack:

{:}{:}

 

Save and check again:

Done!

Complete source code

References (recommended ):

Create horizontal vertical center Alignment Using CSS

How to solve the blank spacing of inline-block elements

Inline-block past and present