7 ways to vertically center text in CSS

1. Problem description: When the height is fixed or not fixed, it is difficult to achieve vertical centering of single-line or multi-line text;

Second, the solution:

1. Use the line-height property to set the line-height to be the same height as the element height.

Limitations: Only applicable to single-line text, with great limitations.

Code:

 .box { height : 100px ; line-height : 100px ; white-space : nowrap ; }

2.padding: Set equal upper and lower padding values.

Limitations: Cannot be vertically centered when there is a height limit.

Code:

 .box { padding-top : 30px ; padding-bottom : 30px ; }

3. Absolute positioning center: top:0; bottom:0; left:0; right:0; margin:auto;