Several methods for vertical horizontal centering using CSS

1. Use Inline-block and vertical-align to achieve centering : This method is suitable for the case of unknown width height.

<! DOCTYPE html>
 
Reference: https://css-tricks.com/centering-in-the-unknown/
2. Use relative absolute positioning and negative margins to center up or down : height and width known

<! DOCTYPE html>
 
In fact, the second to understand can not, first relative to the parent element top,left positioning in 50% position, this is just the top left corner of the image center, and the central point is not centered, plus margin: -100px 0 0-100px; Using negative margins, the center point of the picture is located in the center of the parent element. For vertical horizontal centering
3. Use absolute positioning to achieve centering : Suitable for height, width known situation.

<! DOCTYPE html>
 
4. Use Table-cell,inline-block to achieve horizontal vertical centering : Suitable for situations where height width is unknown

<! DOCTYPE html>
 
5. Horizontal vertical centering when using transform in CSS3 : For situations where height width is unknown

<! DOCTYPE html>
 
You can also use Flexbox to achieve horizontal vertical centering, which is suitable for unknown width heights, but be aware of compatibility

<! 
    DOCTYPE html>