Source: http://www.imooc.com/code/6365
In addition to inserting the table label in the first two sections and changing the display type of the element, you can center the indeterminate-width block element Horizontally, this section describes the 3 ways to achieve this effect, set the float and relative positioning to achieve.
Method Three: 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.
We can understand this: supposedly the parent layer of the UL layer (that is, the DIV layer in the example below) has a split line in the middle of the UL layer of the parent layer (div layer) is divided into two parts, the UL layer of the CSS code is the top left of the UL layer and the parent layer of the UL layer (div layer) line alignment While the LI layer's CSS code is to align the Li Layer's split line with the top left of the UL layer (also the split line of the DIV layer) to achieve the center of the Li Layer.
Example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Horizontal center of variable width block element</title><style>. Container{float: Left;position:relative; Left:50%}. Container ul{List-style:None;margin:0;padding:0;position:relative; Left:-50%;}. Container Li{float: Left;Display:inline;Margin-right:8px;}/*Here is the Code task area*/. Wrap{Clear:both;float: Left;position:relative; Left:50%;}. Wrap-center{background:#ccc;position:relative;margin:0; Left:-50%; }</style></Head><Body><Divclass= "Container"> <ul> <Li><ahref="#">1</a></Li> <Li><ahref="#">2</a></Li> <Li><ahref="#">3</a></Li> </ul></Div><!--Here is the Code task area -<Divclass= "Wrap"> <Divclass= "Wrap-center">Let's take a look at this method.</Div></Div></Body></HTML>
Results such as:
html+css--Horizontal Center Summary-variable width block element method (iii)