Several methods of horizontal centering of elements

1, the center of the element inside the line ,

For example, to set the text, picture, and other inline elements in the horizontal center, you can use the parent element set Text-align:center , that is, to set the element to add a parent element of the container, and then set the parent element (container) of the Text-align property. The method is simple, the principle is easy to understand, it is necessary to pay attention to only the elements in the line;

<!--<! DOCTYPE html>{            text-align:center;        }     </style>

：

2, the width of a certain block element center .

Because it is a block element, so there is no way to use the first method of the Text-align property, this time we have to set the elements of the "left and right margin" value for "auto" to achieve, Margin of the upper and lower values can be arbitrarily set according to demand, but must be "auto" around! It is important to note that before you set up margin:20px auto, you must first set the value of width, that is, the final setup sample is:
div {border:2px solid red; width:100px; margin:20px auto; }
That is, 2 pixels wide red solid border, the entire div element width is 100 pixels, up and down distance browser blank margin of 20 pixels, left and right according to the content of the automatic adjustment, so that the implementation of the center of the block element display, do not forget, to set the width: the value! Width value! Width value! The advantages of this method are simple and easy to understand, compatibility is strong, but the extensibility is poor, unable to adapt to the unknown width of the element.

<! DOCTYPE html>{            width:600px;             Margin: 0 Auto;             Border:1px solid black;        }     </style>

：

3, the width is not determined the center of the block element display.

This can also be divided into three ways:

1) Set position:relative and left:50% using the table label, 2) set display:inline;3).

3.1, the use of table tags. Step one: Add a table tag outside the element you want to set (including, is it a little bit like adding a parent element when setting inline elements?) ）。 Second step: Set the table "left and right Margin center" (this is the same as setting the width of the block element).

1) use Table label;

<! DOCTYPE html>{margin: 0 auto;}     </style>

Summary: It is the element that needs to be centered, surround it with a large table (and this table has only one cell), and then set the table's properties (such as the 2nd method) to center on the line. But the drawback is that a lot of useless tags added, the code looks rather bloated.

3.2), change the block level element display to the inline type, and then set the Text-align:center to achieve the center effect.

<!     DOCTYPE html>{text-align:Center;}. Container Li{Display:inline;}</style>

Summary: The display property of a block-level element that needs to be centered is set to inline first, so that the block-level element is first changed into an inline element, which can be displayed on a single line, and then the parent element text-align of those elements is set to: center. The approximate principle is: block-level----------center (referring to the 1th method), but the shortcomings are also obvious, block-level elements of some features are not, such as height, width settings.

3.3), using the Float property, the main idea is to put the element that needs to be centered float to the left, so that it can be displayed in a row, and then float the entire list to the left of the parent element, and then set to center. How to set it? First set the parent element: left:50%, so that the entire parent element to the right is 50% cheaper, and then set the list: right:50%, so that the list of things to the left of the parent element of the 50%, so that the purpose of the center.
Code Sample:

<!     DOCTYPE html>{float: Left;position:relative; Left:50%; }. Container ul{/*Float:left;*/position:relative; Right:50%;padding:0;margin:0; }. Container Li{/*Float:left;*/position:relative;Display:inline; }. Container a{padding:0 20px; }</style>

Summary: The basic idea is to move the parent element (container) first to the right of the parent container width of 50%, and then the list of elements to the left relative 50%, you can get the center effect. (This method does not understand the words can be seen below the blog, where the details of the introduction, specific links to meet the narrative below.) However, when I was testing this point, there is a problem, that is, UL padding and margin did not clear zero, and then led to have been not too central, and later cleared 0 good.

Several methods of horizontal centering of elements