CSS-—— Horizontal Centering settings

1. Inline element Horizontal Centering method: If the element is set as text, picture, and other inline elements, the horizontal center is implemented by setting Text-align:center to the parent element.

2. Block element--Fixed block element horizontal centering method:

(1) fixed-width block element: The width of the block element is a constant value.

(2) When width is set to a fixed value, Text-align:center does not work and is centered by setting the "left and right margin" value to "auto".

(3) such as: width:200px;/* fixed width */ margin:20px auto/* Center * /

3. Block element--horizontal centering of indeterminate block elements Method 1:

(1) Add the table label, using the length of the table label Adaptive---that does not define its length or 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, Then use the fixed-width block-centered margin method to make it horizontally centered.

(2) Method: First step: Add a table label (including <tbody>, <tr>, <td>) to the outside of the center element you want to set.

(3) Step two: Set the "left and right margin center" for this table (this is the same as for a fixed-width block element).

(3) Example:

. wrap{
Background: #ccc;
display:table;
margin:0 Auto;
}

<div class= "Wrap" >
Set my div container to center horizontally
</div>

4. Block element--horizontal centering of indeterminate block elements Method 2:

(1) Changing the display of block-level elements to the inline type (set to the inline element display) is then used text-align:center to achieve the centering effect.

(2) such as:

. container ul{    list-style:none;    margin:0;    padding:0;    Display:inline;}
5. Block element--horizontal centering of indeterminate block elements Method 3:
(1) 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. 

CSS-—— Horizontal Centering settings