CSS Centering Method Summary

Method One: Line-height

<div class= "vertical" style= "width:200px;height:200px;border:2px solid #999" > Center display </div>.vertical {  line-height:200px;//here will be the same as height        }

　　

Method Two: Position positioning mode

Absolute positioning (Position:absolute) is set for the container, and the positioning height (top:50%) and margin-top are half the height (MARGIN-TOP:-HEIGHT/2)

<div class= "Vertical" > Center display </div>.vertical {
height:100px; Position:absolute;  The position of the top edge of the top:50%;/* element is half the height of the parent element  /margin-top: -50px;/* sets the top negative margin of the element, and the size is half the height of the element */         }

Method Three: Let div simulate table effect

　　

Method Four: Give the upper and lower padding values

　　

Method Five: margin:0 Auto for horizontal centering

Satisfies two conditions: first , the element needs to have a fixed width value, and the Margin-left and margin-right of the second element must be set to auto, neither of which has the effect of having the element horizontally centered without any one of the two conditions.

<div class= "Horizontal" >content</div>.horizontal {width:200px; margin:0 auto;}  

It is not possible to use this similar way to center vertically, only for horizontal centering

Method Six: Use absolute positioning with negative margin to achieve horizontal centering

CSS Centering Method Summary