A summary of how CSS elements are centered horizontally

In line: Text-align:center;

Fixed width block: margin:xpx auto;

Variable width BLOCK:

1.<table> <tbody><tr><td> and then table is the fixed-width block element

2.display:inline then treated as inline elements (there is a problem: Some features are missing, such as setting the length value)

3. By setting float to the parent element and then setting position:relative and left:50% for the parent element, the child elements are set position:relative and left:-50% to achieve horizontal centering.

First, the parent Div floats, and its left edge moves to a position relative to the body, and then the child Div floats, the initial position at its parent Div, and the distance to the left is equal to the parent container 50%, so it is just centered.

The float:left is to make the div no longer exclusive to a single line, but to fit the width of its content.

A summary of how CSS elements are centered horizontally