Summarize the various center layout methods using CSS

This article uses CSS to summarize the various center layout methods, interested in the small partners can refer to

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

Special note: In the element set Position:absolute, to set the center effect, except the CSS3 method described under the blog, you can also use the negative margin to center, so as to solve the compatibility problem, But only for cases where the width is 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.

All of the examples in the center of this article, only the implementation of CSS, HTML code unified as follows:

<p class= "Parent" >       <p class= "Child" >demo</p>   </p>

1. Center Horizontally

1.1 Inline-block with Text-align

. parent{       text-align:center;   }   . child{       display:inline-block;   }

Pros: compatibility is very good, just need to add only in the child elements 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 Table with margin

. child{       display:table;       margin: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 Abasolute with Transform

. parent{       position:relative;   }   . child{       Position:absolute;       left:50%;       Transform:translatex ( -50%);   }

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-cell with Vertical-align

. parent{       Display:table-cell;       Vertical-align:middle;   }

Pros: easy to set up, only need to set the parent element, compatible to ie8+, when compatible with the version of the browser, the replaceable P is the table structure.

2.2 Absolute with Tranform

. parent{       position:relative;   }   . child{       Position:absolute;       top:50%;       Transform:translatey ( -50%);   }

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-block with Text-align plus Table-cell mate Vertical-align

. parent{       Display:table-cell;       Vertical-align:middle;       Text-align:center;   }   . child{       display:inline-block;   }

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

3.2 Absolute with Transform

. parent{       position:relative;   }   . child{       Position:absolute;       left:50%;       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. All-rounder 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:flex;       Justify-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:flex;       Align-items:center;   }

4.3 Horizontal Vertical Center

parent{           Display:flex;           Justify-content:center;           Align-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;         } */