CSS of various centers

This blog discusses the situation where the center is set to a variable total width, the content width is variable . (still centered when changing the size).

Special note: When the element is set position:absolute; to set the center effect, except the CSS3 method described under the blog, you can also use negative margin to center, this solves the problem of compatibility, but only applicable to the case of wide height known (because the negative offset is half the width of the element). When the width and height change, the center effect is no longer.

The child elements in these layouts, because of their property settings, are default to the content width.

This blog all the center of the example, only to discuss the implementation of CSS, HTML code unified as follows:

<class="parent" >    <class="Child" >demo</div></ div>        

1. Center Horizontally

1.1 inline-blockWith text-align

. Parent{    text-align: center;} . Child{display: inline-block;}         

Pros: Compatibility is very good, just need to add only in the child element of the CSS to add *display:inline and *zoom:1 can be compatible to IE6, 7; Disadvantage: Internal text will also be horizontally centered, need to eliminate the impact.

1.2 tableWith margin

. Child{    display:tablemargin:0 auto;}      

Advantages: The settings are particularly simple, just set the child elements, support ie8+, and support ie6,7, the replaceable child element is a tabular structure.

1.3 abasoluteWith transform

. Parent{    Position:Relative;} .child{ :absolute left:50 %transform:  Translatex (-50%)                /span>                

Advantage: Centering elements do not affect other elements. Cons: CSS3 new attribute supports ie9+, low version browser not supported.

2. Center vertically

2.1 table-cellWith vertical-align

. Parent{    display: table-cellvertical-align:middle;}   

Pros: Easy to set up, only need to set the parent element, compatible to ie8+, need to be compatible with the version of the browser, can be replaced div by the table structure.

2.2 absoluteWith tranform

. Parent{    Position:Relative;} .child{ :absolute top: 50% transform:  Translatey (-50%)                /span>                

Advantage: Centering elements do not affect other elements. Cons: CSS3 new attribute supports ie9+, low version browser not supported.

3. Horizontal + Vertical Center

3.1 inline-blockWith text-alignPlus table-cellWith vertical-align

. Parent{    display: Table-cell vertical-align:middletext-align:center ;} .child{ : Inline-block                /span>                

Advantages: Combining the first two methods, good compatibility! Support ie8+, low-version browser is compatible. Cons: Setup is more complex.

3.2 absoluteWith transform

. Parent{    Position:Relative;}. Child{ Position: Absolute span class= "rule" >left: 50%< Span class= "value" >top: 50% transform:  Translate (-50%,-50%) ;           

Advantage: Centering elements do not affect other elements. Cons: CSS3 new attribute supports ie9+, low version browser not supported.

4. The Almighty flex

CSS3 new layout properties, simple layout, powerful, slightly poor performance, only support ie10+, on the mobile side of the use of more.

4.1 Horizontal Center

/* When the parent element is set Display:flex, the child element is Flex-item, and the default is the content width. */. Parent{    display: flexjustify-content: center;} / * When you set the child element to margin:0 Auto, you can delete the justify-content:center of the parent element, as well as the center effect *//*. child{ margin:0 Auto;} */

4.2 Center Vertically

. Parent{    display: flexalign-items: center;}     

4.3 Horizontal Vertical Center

. Parent{    display: flexjustify-content: Centeralign-items:  Center;} /* As in the first part of the flex layout, you can also set the following on the child element: delete the above properties except display */*. child{ Margin:auto;} *  / 

CSS of various centers