CSS Adaptive width multiple methods to achieve width-adaptive horizontal centering (reproduced)

Horizontal centering when both parent and child elements do not have a width defined:

Display:inline-block
Can be combined with text-align:center and display:inline-block, this technique requires a parent element.
HTML code:

Copy CodeThe code is as follows:
<div class= "NavBar" >
<ul>
<li><a href= "/" >Home</a></li>
...
</ul>
</div>

CSS code:

Copy CodeThe code is as follows:
. navbar {
Text-align:center;
}
. navbar UL {
Display:inline-block;
}
. navbar Li {
Float:left;
}
. navbar Li + li {
margin-left:20px;
}

IE series ie8+ support, to IE7 IE6 support need to add the following code to make display:inline like Display:inline-block

Copy CodeThe code is as follows:
. navbar UL {
*display:inline;
*zoom:1;
}

position:relative
Using the combination of position:relative and float and the relationship between floating and positioning reference, this technique requires two parent elements, one for positioning and the other to avoid scrollbars.
HTML code:

Copy CodeThe code is as follows:
<div class= "NavBar" >
<div>
<ul>
<li><a href= "/" >Home</a></li>
...
</ul>
</div>
</div>

CSS code:

Copy CodeThe code is as follows:
. navbar {
Overflow:hidden;
}
. navbar > Div {
position:relative;
left:50%;
Float:left;
}
. navbar UL {
position:relative;
left:-50%;
Float:left;
}
. navbar Li {
Float:left;
}
. navbar Li + li {
margin-left:20px;
}

IE7 need to add the following code support:

Copy CodeThe code is as follows:
. navbar {
position:relative;
}

display:table
This approach is a good choice when implemented with very few tags.
HTML code:

Copy CodeThe code is as follows:
<ul class= "NavBar" >
<li><a href= "/" >Home</a></li>
...
</ul>

CSS code:

Copy CodeThe code is as follows:
. navbar {
display:table;
margin:0 Auto;
}
. navbar Li {
Display:table-cell;
}
. navbar Li + li {
padding-left:20px;
}

IE7 and browsers are not supported, and other mainstream browsers are supported.

Display:inline-flex
This approach requires the use of flex-layout knowledge.
HTML code:

Copy CodeThe code is as follows:
<div class= "NavBar" >
<ul>
<li><a href= "/" >Home</a></li>
...
</ul>
</div>

CSS code:

Copy CodeThe code is as follows:
. navbar {
Text-align:center;
}
. NavBar > UL {
Display:-webkit-inline-box;
Display:-moz-inline-box;
Display:-ms-inline-flexbox;
Display:-webkit-inline-flex;
Display:inline-flex;
}
. navbar Li + li {
margin-left:20px;
}

using CSS fit-content values
Here's a look at how to create a navigation with fit-content that contains the unknown width of the child element floats.
HTML code:

Copy CodeThe code is as follows:
<div class= "NavBar Center" >
<ul>
<li><a href= "/" >Home</a></li>
<li><a href= "/" >about us</a></li>
<li><a href= "/" >our products</a></li>
<li><a href= "/" >customer support</a></li>
<li><a href= "/" >Contact</a></li>
</ul>
</div>

CSS code:

Copy CodeThe code is as follows:
. Center ul{
Width:-moz-fit-content;
Width:-webkit-fit-content;
Width:fit-content;
Margin:auto;
}

Browser support is less than Chrome and Firefox such as-webkit--moz-kernel browser. Of course, it will grow up slowly.
This approach is a new thing that pushes the browser to evolve and is currently available in browsers that can write prefixes, and does not work under IE9 and IE9.
According to your needs to choose the right method, Display:inline-block compatibility is good, Flex-box will be used in the future.

CSS Adaptive width multiple methods to achieve width-adaptive horizontal centering (reproduced)