Various effects: horizontal center or vertical center, and horizontal center and vertical

Various effects: horizontal center or vertical center, and horizontal center and vertical

(1) horizontal center row element: text-align: center;

(2) When the set element is a block element, text-align: center does not work. In this case, it is divided into two situations: fixed width (with width value) block elements and undefined block elements

To satisfy the fixed width and block conditions, you can set the left and right margin values to auto to center the elements such as margin {0, auto}

(3) When the element is set to an undefined block element, the display of the block element is changed to the inline type (set to display the line element), and the text-align: center is used to achieve the horizontal center effect.

(4) set float for the parent element, set position: realtive and left: 50% for the parent element, and set position: relative and left: -50% to achieve horizontal center.

(5) set a single line of text with the parent element height to center vertically: the vertical center of a single line text with the parent element height determined is achieved by setting the height of the parent element to be consistent with the height of the parent line-height limit.

(Height: the height of the element. line-height: as the name suggests, the height of the row (row spacing) refers to the distance between the baseline between the row and the row in the text ).

(6) multi-row text with the parent element height determined: method 1 use the INSERT table (including tbody, tr, td) label and set vertical-align: middle.