Common methods for centering CSS elements

Only normal and absolutely positioned elements can be centered, and floating elements do not exist in the center.

1. Block-level element centering1) Common flow elements (position:static or position:relative)

• Center horizontally: {margin:0 auto;}

2) Absolute positioning elements (Position:absolute or position:fixed)

• Horizontal, Vertical Center: the element {margin:auto; top:0; bottom:0; left:0; right:0; Overflow:auto}, whose parent element {position:relative;}

2. Inline-level element centering

• Center horizontally: set {text-align:center on its parent element;}
• Vertical Center in line: {height:30px; line-height:30px;}

Common methods for centering CSS elements