CSS实现DIV水平自适应居中
DIV水平自适应居中
1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="utf-8"/>
5 <title>如何自适应宽度的水平居中</title>
6 <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>
7 </head>
8 <body>
9 <div >
10 <h2>水平居中 <code>display:inline-block</code></h2>
11 <div class="navbar center-1">
12 <ul>
13 <li><a href="/">Home</a></li>
14 <li><a href="/">About us</a></li>
15 <li><a href="/">Our products</a></li>
16 <li><a href="/">Customer support</a></li>
17 <li><a href="/">Contact</a></li>
18 </ul>
19 </div>
20 <h2>水平居中 <code>position:relative</code></h2>
21 <div class="navbar center-2">
22 <div>
23 <ul>
24 <li><a href="/">Home</a></li>
25 <li><a href="/">About us</a></li>
26 <li><a href="/">Our products</a></li>
27 <li><a href="/">Customer support</a></li>
28 <li><a href="/">Contact</a></li>
29 </ul>
30 </div>
31 </div>
32 <h2>水平居中 <code>display:table</code></h2>
33 <ul class="navbar center-3">
34 <li><a href="/">Home</a></li>
35 <li><a href="/">About us</a></li>
36 <li><a href="/">Our products</a></li>
37 <li><a href="/">Customer support</a></li>
38 <li><a href="/">Contact</a></li>
39 </ul>
40 <h2>水平居中 <code>display:inline-flex</code></h2>
41 <div class="navbar center-4">
42 <ul>
43 <li><a href="/">Home</a></li>
44 <li><a href="/">About us</a></li>
45 <li><a href="/">Our products</a></li>
46 <li><a href="/">Customer support</a></li>
47 <li><a href="/">Contact</a></li>
48 </ul>
49 </div>
50 <h2>水平居中 <code> fit-content</code></h2>
51 <div class="navbar center">
52 <ul>
53 <li><a href="/">Home</a></li>
54 <li><a href="/">About us</a></li>
55 <li><a href="/">Our products</a></li>
56 <li><a href="/">Customer support</a></li>
57 <li><a href="/">Contact</a></li>
58 </ul>
59 </div>
60 </div>
61 </body>
62 </html>