Summary of CSS Vertical center arrangement

Preface: This is the author's understanding and finishing after learning. If there are errors or questions, please correct me, I will continue to update!

There are a lot of places for vertical centering, and there are many ways to solve them.

known element width can be used position positioning + margin negative method

Absolute Positioning + 4 directions all 0px + Margin:auto can be based on the parent container horizontal vertical Center, if only vertical center, it can be left and right to delete, and horizontal center is also a lot of methods
Absolute positioning + Left 50% + margin left: Half the width of negative values can be done horizontally center right can also
Absolute Positioning + Upper 50% + margin: The negative value of the height of half can be vertical center bottom can also

<!        DOCTYPE html>


View Code


unknown element Width can be moved with position positioning + transform:translate (x, y)
Absolute Positioning + Upper 50% + 50% + transform:translate ( -50%,-50%) can be vertically centered



<!        DOCTYPE html>




the IMG image in P is centered vertically :

Can be used Vertical-align:middle, but this property only in the Inline-block type (inline also has influence) the element body function, vertical-align Understanding I must continue to study, also welcome everybody to correct


Method One: Picture Vertical-align:middle + Parent element height is consistent with Line-height



<! DOCTYPE html>


View Code

Method Two: Parent element settings Display:table-cell and Vertical-align



<! DOCTYPE html>