CSS centered layout summary

Centered layout

demo

1. Horizontally centered

1> Scheme一 inlink-block+text-align

                            . The width and height of child elements cannot be set

2> Option 2 table+margin

.child {display:table; margin:0 auto;}

Advantages: Only need to set child (self)

3> Option 3 absolute+transform

        .parent {position: relative;}

.child {position:absolute;left:50%;transform:translateX(-50%);}

Advantages: child elements will not affect other elements

Disadvantages: compatibility issues

4 > ; Option 4 flex+justify-content

.parent {display:flex;justify-content:center;}

Advantages: Just set the parent node

or set it to

.parent {display:flex;}

.Child {margin: 0 auto;} Disadvantages: Flex low version IE does not support

2. Vertical

1 & gt; Scheme Table-Cell+Vertical-Align

.parent {Display: Table-Cell ;vertical-align:middle;}

Advantages: Only need to set the parent node, good compatibility

2> Scheme 2 absolute+transform

.parent {position:relative;}

. child {position:absolute;top :50%;transform:translateY(-50%);}

                                                        use   using   ‐           ‐   ‐ ‐ ‐ ‐                                .parent { display:flex;align-items:center;}

Advantages: Only need to set the parent node

Disadvantages: Compatibility issues

3. Both horizontally and vertically centered

1> Option 1 inline-block+text- Align+table-cell+vertical-align

.parent {text-align: center; display: table-cell; vertical-align: middle;} .Child {Display: Inline-Blo CK;} & 2 & gt; scheme Two absolute+transform

.parent {posity: related:}

.Child {posity: absolute; left: 50%; TOP: 50%; transform: translate (-50%, -50%);}

3 & GT ; Option 3 flex+justify-content+align-items

.