Various centering methods in CSS

Horizontal Centering method

1. Center element in line

Inline element centering is only for inline elements, such as text, Picture (IMG), buttons, and other inline elements, which can be implemented by setting Text-align:center to the parent element. Also, this method can be used if the block element property display is set to inline. But the first condition is that the child element must not be affected by float, otherwise everything is useless.

2, block Element Center

(1) Centering of fixed-width block elements

Elements that satisfy a fixed width (the width of the block element is constant) and a block of two conditions can be centered by setting the left and right margin value to "auto".

(2) Center of variable width block element

Show:

Method 1: This method is used: the length of the table label is adaptive---that does not define its length nor the length of the default parent element body (table whose length depends on the length of its text), so it can be regarded as a fixed-width block element, and then using a fixed-width blocky center margin method, To align it horizontally.

Method 2: Horizontally center by setting float for the parent element and then setting position:relative and left:50% for the parent element, setting position:relative and left:-50% for the child element.

Output:

3.position plus margin method for horizontal vertical centering
Output:

Use Margin:auto and Position:absolute to achieve a centered display. But here we have to determine the height of the inner element, which can be used as a percentage and more suitable for the mobile side.

4display:flex and Margin:auto use

The implementation effect is as follows.

Display:flex is an elastic layout, followed by a slow introduction to the properties of flex.

5. Using Display:flex;align-items:center;justify-content:center, this is the mobile-preferred
Output:

6, pure position to achieve horizontal vertical center

Output:

Here, the left value of the child element (con) of the child container is calculated as the formula: left= (width of the parent element-the width of the child element)/2= (200-100)/2=50px;
The top value of the child element (Con) is calculated as a formula: top= (high-child element height of the parent element)/2= (200-100)/2=50px;

The second type of code is directly

The left value is fixed to 50%, the margin-left= of the child element-(width/2 of the child element) =-100/2= -50px; The top value is also the same, fixed to 50%, margin-top= of child elements-(high/2 of child elements) =-100/2= -50px;

Both of these methods apply to all browsers.

Various centering methods in CSS