CSS Vertical Centering

Summary of common methods for vertical centering:

The div is centered in the Div

1. Absolute centering

　Position:absolute; left:0; top:0; right:0; bottom:0;

Margin:auto;

2. Absolute positioning

Position:absolute;

top:50%;

left:50%;

Transform:translate ( -50%,-50%);

Or

margin:-width;

3. Inner margin

Second, span is centered in Div

1. Single-line text

1)line-height == height

2) button feature

2. Multiple lines of text

1) Nesting div in the outer layer to center the div vertically

2) pseudo element Before/after

Content: "";

height:100%;

Display:inline-block;

Vertical-align:middle;

Third, img centered in Div

1. Pseudo-Element Before/after

Content: "";

height:100%;

Display:inline-block;

Vertical-align:middle;

2. Table

Display:table-cell;

Vertical-align:middle;

3. Background-position

CSS Vertical Centering