Summary of Horizontal vertical centering method

Work often used in the horizontal vertical center, especially vertical center, which has a lot of knowledge, has been neglected to summarize, today's son weekend, to review a bit:

HTML structure:

       <class= "container">            <class = "Content" ></ Div >       </ Div >

　　

        . Container{            background-color: #4EA46A;             Height: 200px;             width:80%;        }         . Content{            height:100px;             Background-color: #2E5F3F;          }

• Absolute Center Method (i) one--absolute + margin negative for horizontal vertical centering

          . Content{: 100px;                  Position: absolute;               Left:50%;               margin-left:-100px; /* half of the content width */               top:50%;               margin-top:-50px;          }

Constraints: You need to know the value of the element's wide height ;

Here is a small point of knowledge: the Margin-top/bottom (padding-top/bottom) percentage in CSS is based on the width of the most recent block-level ancestor element rather than the height

• Absolute Center Method (ii)absolute + margin:auto Horizontal vertical centering

Usually quite often use margin:0 auto to the horizontal center, but in fact this method can also achieve vertical center, I also know ~ to see the following code:

. Container{Background-color:#4EA46A;Height:200px;width:50%;margin:100px Auto;position:relative; }. Content{width:80%;Height:50%;Background-color:#2E5F3F; }. Content{margin:Auto;position:Absolute;Top:0; Left:0;Bottom:0; Right:0; }

　　

This implementation of the absolute centering method works as follows:

1. In the normal content stream, the Margin:auto effect is equivalent to the margin-top:0;margin-bottom:0
2. Position:absolute the absolute positioning block jumps out of the content stream, the rest of the content stream renders when the absolute positioning part is not rendered
3. set top:0 for block area; left:0; bottom:0; right:0; Assigns a bounding box to the browser, at which point the block will populate all available space for its parent element (body or element positioned as relative)
4. Setting a height or width for a content block prevents the content block from occupying all available space, prompting the browser to recalculate Margin:auto based on the new bounding box
5. Because the content block is absolutely positioned, out of the normal stream of content, the browser gives Margin-top,margin-bottom the same value, which centers the element block within the previously defined boundary

• 　Table-cell Center

Using the special properties of table--table-cell the principle that the cell contents are displayed in the middle of the row after set to Vertical-align:middle, vertically centered;

Limit: You need to add an extra wrapper to the center element:

 <Divclass= "Container">        <Divclass= "Contentwrapper">            <Divclass= "Content"></Div>        </Div> </Div>

The CSS code is as follows:

        . Container{            display:table;        }         . Contentwrapper{            vertical-align: Middle;             Display: table-cell;        }         . Content{            width: 100%;             Height:50%;             background-color: #2E5F3F;         }

• Inline-block Center:

The corresponding article in Css-trick https://css-tricks.com/centering-in-the-unknown/the height by pseudo-class elements, combining Inline-block and vertical-align: Middle Vertical centering:

The principle is as follows:

<class= "container">        <class = "Content" > What's past is prologue</div>    </div> 

. Container2{text-align:Center; }. Container2:before{content:"';Display:Inline-block;vertical-align:Middle;Height:100%;Margin-right:-0.25em;/*Adjust Position*/}. Content2{Display:Inline-block;vertical-align:Middle;Line-height:40px;Color:#2E5F3F;Border:1px solid #2E5F3F; }

The advantage of this approach is that you can no longer know the width of the parent element and the child element on the basis of the center

Restriction: When the child element is very wide, it will be squeezed to the top (after pseudo-element) or extruded container (before pseudo element) when it is close to 100%

Required to set the maximum width, such as Max-width:calc (100%-0.5em) to limit

• Flex layouts

After using the fluid layout, we found that this is the real horizontal vertical center.

. Container3{Display:-webkit-box;Display:-webkit-flex;Display:-ms-flexbox;Display:Flex;-webkit-box-align:Center;-webkit-align-items:Center;-ms-flex-align:Center;Align-items:Center;-webkit-box-pack:Center;-webkit-justify-content:Center;-ms-flex-pack:Center;justify-content:Center; }

The default spindle is the horizontal axis: Justify-content defines how the elastic items are arranged along the main axis of the current line, and the arrangement of the align-items along the side axes

Limitations: Compatibility issues: ie11+ support

　　

The usual horizontal vertical centering method summarizes so much first

Summary of Horizontal vertical centering method