Horizontal and vertical centering method and compatibility

Method
The first way is through absolute positioning absolute + negative margin
First of all, we know the width and height of sub elements , Set... For child elements top：50%;left：50%,

But the absolute positioning is based on the upper left corner of the child element , The effect we want is to center the child elements .... With the help of the negative value of the outer margin , Negative outer margins allow elements to be positioned in the opposite direction ,

By specifying that the outer margin of the child element is a negative value that is half the width of the child element , You can center the child elements

** advantage ：** It's easy to understand , Compatibility is good.

** shortcoming ：** You need to know the width and height of the child elements

The second kind ： Also through the way of absolute positioning absolute + margin auto
This is to set the distance in all directions 0, Let's talk about it again margin Set to auto; Just go

** advantage ：** Compatibility is also good

** shortcoming ：** You need to know the width and height of the child elements

The third kind of ：absolute + calc（ Calculation ）
This method top The percentage of is based on the upper left corner of the element , Then subtract half of the width and height

calc: Any length value can be used calc() Function to calculate ;
calc() Function uses standard mathematical operation priority rules ;
It supports “+”, “-”, “*”, “/” operation

You can also view calc course ：https://www.runoob.com/cssref/func-calc.html

** advantage ：** His compatibility depends on calc The compatibility of

** shortcoming ：** It is also necessary to know the width and height of child elements

A fourth ：absolute + transform （ transition ）
This method does not require the fixed width and height of child elements

Fix the absolute positioning problem , You can also use css3 Newly added transform,transform Of translate

Property can also set the percentage , It's relative to its width and height , So you can translate Set to -50%, You can center it

** advantage ：** Less code

** shortcoming ：**IE8 I won't support it , Property needs to add browser manufacturer prefix , May interfere with other transform effect , In some cases, text or element boundaries are rendered blurred .

The fifth ：line-height

advantage ： The code is concise

  shortcoming ： Valid only for text , Only valid for single line text , Multiline text cannot

The ninth ： Elastic box way
By setting... To the parent element justify-content: center;

align-items: center; That's all right.

** advantage ：** The mobile terminal can be used flexibly

** shortcoming ：**pc The end needs to be judged according to the compatibility

The tenth ：grid（ Grid layout ）
Set for parent display:grid;

Set the child element to align-self: center;justify-self: center;

** advantage ：** Less code

** shortcoming ：** Compatibility is not as good as flex, Suggest using flex
 

  Don't know the width and height of the element :

 

 

 

shortcoming : Know the width and height of the element :