Summarize the advantages and disadvantages of vertical centering methods and usage scenarios

First, inside the container

　　　　

1 . Center-container{2 position:relative;3}4   5 . Absolute-center{6 width:50%;7 Height:50%;8 Overflow:Auto;9 margin:Auto;Ten position:Absolute; One Top:0; Left:0;Bottom:0; Right:0; A}

Second, negative margin

. Is-negative{width:300px;Height:200px;padding:20px;position:Absolute;Top:50%; Left:50%;Margin-left:-170px;/*(width + padding)/2*/Margin-top:-120px;/*(height + padding)/2*/}

Advantages:

1. Good cross-browser features, compatible with IE6-IE7.

2. Small amount of code.

Disadvantages:

1. Not adaptive. Percent size and min-/max-property settings are not supported.

2. The contents may overflow the container.

3. The margin size is related to the padding, and whether the box-sizing:border-box is defined, and the calculation needs to be based on different circumstances.

Third, deformation

{     width: 50%;     margin: auto;     position: absolute;     top: 50%; Left: 50%;     -webkit-transform: translate ( -50%,-50%);         -ms-transform: translate ( -50%,-50%);             Transform: translate ( -50%,-50%);  }  

Advantages:

1. Content variable Height

2. Low Code Volume

Disadvantages:

1. IE8 does not support

2. Attribute requires writing browser vendor prefix

3. May interfere with other transform effects

4. There are situations where text or element boundaries render blurry

Iv. table Cells

{display:table;}  {display:table-cell; vertical-align:Middle;}

Advantages:

1. Highly variable

2. Content overflow will open the parent element.

3. Cross-browser compatibility is good.

Disadvantages:

Additional HTML markup required

Five, inline block elements

. Center-container.is-inline{text-align:Center;Overflow:Auto; }    . Center-container.is-inline:after,. Is-inline. Center-block{Display:Inline-block;vertical-align:Middle; }    . Center-container.is-inline:after{content:"';Height:100%;Margin-left:-0.25em;/*To offset spacing. May vary by font*/}. Is-inline. Center-block{Max-width:99%;/*prevents issues with long content causes the content block to being pushed to the top*/    /*Max-width:calc (100%-0.25em)/* only for ie9+*/}

Advantages:

1. Highly variable

2. Content overflow will open the parent element.

3. Support cross-browser, also adapt to IE7.

Disadvantages:

1. Need a container

2. Horizontal centering depends on margin-left: -0.25em; This dimension needs to be adjusted for different font/size sizes.

3. The content block width cannot exceed the container's 100%-0.25em.

VI. Flex Layout

　　

. Center-container {        display:flex;         justify-content:Center;         align-item:Center} . Center-content {        width:50%;         height:50%}

Advantages:

1. Variable Height width

Disadvantages:

1. Need a container

2.IE7/8 not compatible

Summarize the advantages and disadvantages of vertical centering methods and usage scenarios