Css vertical center sorting, css vertical center sorting

Css vertical center sorting, css vertical center sorting
This is my understanding and arrangement after learning. If you have any errors or questions, please correct them and I will keep updating them!

There are many vertical centers and solutions.

Known element widthPosition + negative margin value can be used

Absolute positioning + 4 directions all 0px + margin: auto can achieve horizontal vertical center based on the parent container. If you only need vertical center, you can delete left and right, there are also many ways to align horizontally
Absolute Position + Left 50% + margin left: negative value in half width can be horizontally centered or right
Absolute positioning + upper 50% + margin: The negative value of half of the height can be vertical center or bottom

<! DOCTYPE html> View Code
 
Unknown element widthYou can use position positioning + transform: translate (x, y) to move
Absolute positioning + upper 50% + lower 50% + transform: translate (-50%,-50%) can be vertically centered
<! DOCTYPE html> View Code
 
Vertical center of img image in div:
Vertical-align: middle can be used, but this attribute only works for elements of the inline-block type (inline also affects). I have to continue learning about vertical-align, thank you for your correction.

Method 1: Image vertical-align: the height of the middle + parent element is consistent with the line-height.
<! DOCTYPE html> View Code
Method 2: Set the parent element to display: table-cell and vertical-align.
<! DOCTYPE html> View Code