CSS page layout notes_html/css_WEB-ITnose

Centered layout

Horizontally centered

The width of both the parent element and the child element is unknown

inline-block text-ailgn

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

Advantages: Good compatibility
Disadvantages: The text of the sub-element inherits the text-align attribute, and the sub-element needs to add text-align: left; Style

absolute transform

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

Advantages: Centering child elements will not affect other elements

Disadvantages: transform is a property of CSS3 and has compatibility issues

flex justify-content

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

Advantages: Only need to set the style of the parent element

Disadvantages: Compatibility issues

flex margin

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

Vertical Centered

The height of the parent container and child container is unknown

.parent{display:flex;}.child{margin:0 auto;}

table-cell vertical-align

Advantages: Good compatibility

absolute transform

.parent{display:table-cell; vertical-align:middle;}

Advantages: child elements will not interfere with other elements

Disadvantages: compatibility

flex align-item

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

Advantages: only the parent element needs to be set

Disadvantages: Compatibility issues

Horizontal and vertical centering

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

The heights of both parent and child containers are unknown

inline-block text-align table-cell vertical-align

absolute transform

flex justify-content align-item

.parent{text-align:center; display:table-cell; vertical-align:middle;}.child{display: inline-block;}