How CSS elements are horizontally vertically centered

1. The element is centered horizontally

1.1 Setting the properties of a parent element

Text-align:center;

Description: This property is valid only for child elements of the parent element, such as Img,input,select,button (inline elements, but in the form of inline elements, can be set width and height), span needs to set the display property to inline, and set width and height.

Reference to: MDN inline element

1.2 Setting the element's own margin properties

Margin:0 Auto;display:block;

Description: The element must be set as a block element, and the margin property automatically assigns the left and right margins to the center effect

1.3 Setting element Positioning properties

position:relative; The parent element sets the relative positioning Position:absolute; The child element sets the absolute position and moves the element to the left by half its length Width:50px;height:50px;left:50%;transform:translatex (-50%);

2. The element is centered vertically

2.1 Setting element positioning properties, similar to 1.3

position:relative; The parent element sets the relative positioning Position:absolute; The child element sets the absolute position and moves the element to the left by half its length Width:50px;height:50px;top:50%;transform:translatey (-50%);

2.2 Setting elements with the table attribute

Display:table-cell;vertical-align:middle;

Description: The inline or inline element is disguised as a cell lattice element, and the cell is processed through the properties of the table tag, which is incompatible with the lower version of IE6/7

3. Element horizontally vertically Centered

3.1 Setting element positioning properties, similar to 1.3

position:relative; The parent element sets the relative positioning Position:absolute; The child element sets the absolute position and moves the element to the left by half its length width:50px;height:50px;left:50%;top:50%;transform:translate (-50%,-50%);

3.2 Auto-positioning attributes based on elements

position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:50px;height:50px;

Note: This method is similar to 3.1, except that all margin values are automatically calculated to reach the top and bottom left and right center effect.

Reference: https://www.cnblogs.com/zjjDaily/p/5952723.html

How CSS elements are horizontally vertically centered