Thoughts on the center problem in CSS and Solutions

Based on the different features of block-level elements and intra-row elements in CSS, the center display method is also different. Below we will summarize the situation of horizontal and vertical center:

1. horizontal center
1.1 set text-aglin: Center for the parent element to horizontally center the text, image, and other row elements.
1.2 horizontal center of block-level elements whose width is determined is achieved by setting the values of margin-left and margin-Right to auto.
1.3 The following three methods can be used to center block-level elements with uncertain width values. You can select different schemes based on the actual situation:
1.3.1 change the display value of block-level elements to inline, and use text-aglin: center to center the elements,
However, the disadvantage of this method is that the length and width cannot be set after the block-level element is converted into the Row Element. Of course, there are other limitations of the row element.
1.3.2 use table. Table itself is not a block-level element (common values of display include block, compact, inline, table, none, marker ).
Its width is "lifted" by the width of the internal elements in its cell. Even if the width is not set, you can use margin-left/right: auto to center.
Of course, using the table label will significantly increase Code .
1.3.3 set float, position: relative, and left:-50% for the parent element, and set position: relative and left:-50% for the child element,
It can also achieve horizontal center, but the location attribute of relative is not well controlled.
2. Vertical center
2.1 The vertical center of text, images, and block-level elements with uncertain parent element height is achieved by setting the same top and bottom margins of the parent element.
2.2 The vertical center of the single line text with the parent element height is implemented by setting line-height for the parent element: (the height value of the parent element.
2.3 The vertical center of multi-line text, images, and block-level elements with the height of the parent element is handled in three situations:
2.3.1 vertical-align is available when the parent element is TD and Th.
2.3.2 display: Table-cell can be used in Firefox and IE8 for parent elements other than this type to activate them to TD or th type.
2.3.3 if neither of the above conditions is met, you need to add table labels to the elements ~~~