DIV水平自适应居中
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8"/>
<title>如何自适应宽度的水平居中</title>
<style>.navbar{margin:20px 0;}.navbar ul{margin:0;padding:20px;list-style:none;border-radius:8px;background:#eee;box-shadow:0 0 2px rgba(0,0,0,0.4) inset;}.navbar li{margin:0;padding:0;}.navbar a{display:block;padding:6px 10px;border-radius:12px;color:#111;background:#ccc;font:bold 1em/1 Arial,Helvetica,sans-serif;text-decoration:none;}.navbar a:hover,.navbar a:focus{color:#fff;background:#333;}.center-1{text-align:center;}.center-1 ul{display:inline-block;}.center-1 li{float:left;}.center-1 li+li{margin-left:20px;}.center-2{overflow:hidden;}.center-2>div{position:relative;left:50%;float:left;}.center-2 ul{position:relative;left:-50%;float:left;}.center-2 li{float:left;}.center-2 li+li{margin-left:20px;}.center-3{display:table;margin:20px auto;padding:20px;list-style:none;border-radius:8px;background:#eee;box-shadow:0 0 2px rgba(0,0,0,0.4) inset;}.center-3 li{display:table-cell;}.center-3 li+li{padding-left:20px;}.center-4{text-align:center;}.center-4>ul{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex;}.center-4 li+li{margin-left:20px;}.ggsd{width:728px;margin:0 auto;}</style>
</head>
<body>
<div id="body">
<h2>水平居中 <code>display:inline-block</code></h2>
<div class="navbar center-1">
<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>
<h2>水平居中 <code>position:relative</code></h2>
<div class="navbar center-2">
<div>
<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>
</div>
<h2>水平居中 <code>display:table</code></h2>
<ul class="navbar center-3">
<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>
<h2>水平居中 <code>display:inline-flex</code></h2>
<div class="navbar center-4">
<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>
<h2>水平居中 <code> fit-content</code></h2>
<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>
</div>
</body>
</html>