Centered layout
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
.