center vertically horizontally

This is the body code

1. Center vertically and horizontally

Analysis: The parent element is relative and the child element is absolute. The child element sets the width and height, top and left are set to 50%, margin-top and margin-left are set to half the height and width multiplied by -1.

2. Horizontally centered:

Method 1: margin: 0 auto;

Method 2:

Analysis: parent element relative, child element absolute, child element set width, left: 50%; margin-left: half of the width multiplied by -1;

3. Vertical centering:

Analysis: parent element relative, child element absolute, child element set height, top: 50%; margin-top: half of the width multiplied by -1;