CSS基础学习 21.CSS居中总结

注意：*在IE中并不代表通配符的意思，是代表根元素的意思，所以为了匹配适应各种浏览器，进行页面初始化

1 <style>
2    *{
3     margin:0;
4     padding:0;
5      }
6 </style>

用以下形式代替

1 <style>
2    html,body{
3     margin:0;
4     padding:0;
5      }
6 </style>

1.盒子居中 margin:0 auto;

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         html,body{
 8             margin: 0;
 9             padding: 0;
10         }
11         .container{
12             width: 100%;
13             min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
14             height: 70px;
15             background-color: aquamarine;
16         }
17         .header{
18             width: 80%;
19             height: 70px;
20             background-color: blueviolet;
21             min-width: 996px;            
22         }
23     </style>
24 </head>
25 <body>
26     <div class="container">
27         <div class="header"></div>
28     </div>
29 </body>
30 </html>

设置margin:0 auto;让盒子居中

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         html,body,ul{
 8             margin: 0;
 9             padding: 0;
10         }
11         .container{
12             width: 100%;
13             min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
14             height: 70px;
15             background-color: aquamarine;
16         }
17         .header{
18             width: 80%;
19             height: 70px;
20             background-color: blueviolet;
21             min-width: 996px;
22             margin:0 auto;    /*上下为0，左右为自适应*/
23         }            
24     </style>
25 </head>
26 <body>
27     <div class="container">
28         <div class="header">            
29         </div>
30     </div>
31 </body>
32 </html>

2.文字居中 line-height;text-align:center;

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         html,body,ul{
 8             margin: 0;
 9             padding: 0;
10         }
11         .container{
12             width: 100%;
13             min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
14             height: 70px;
15             background-color: aquamarine;
16         }
17         .header{
18             width: 80%;
19             height: 70px;
20             background-color: blueviolet;
21             min-width: 996px;
22             margin:0 auto;    /*上下为0，左右为自适应*/
23         }        
24         ul li{            
25             display: inline-block;/*内联块级元素和其他元素都在一行上*/
26             list-style-type: none;
27         }
28     </style>
29 </head>
30 <body>
31     <div class="container">
32         <div class="header">
33             <ul>
34                 <li>列表项目</li>
35                 <li>列表项目</li>
36                 <li>列表项目</li>
37                 <li>列表项目</li>
38             </ul>
39         </div>
40     </div>
41 </body>
42 </html>

line-height;text-align:center;设置文字居中

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         html,body,ul{
 8             margin: 0;
 9             padding: 0;
10         }
11         .container{
12             width: 100%;
13             min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
14             height: 70px;
15             background-color: aquamarine;
16         }
17         .header{
18             width: 80%;
19             height: 70px;
20             background-color: blueviolet;
21             min-width: 996px;
22             margin:0 auto;    /*上下为0，左右为自适应*/
23             text-align: center;/*水平居中*/
24 
25         }
26         ul{
27             line-height: 70px;/*垂直居中*/
28         }
29         ul li{
30             /*float: left;*//*会脱离文档流，这时不能用text-align: center;设置水平居中*/
31             display: inline-block;/*内联块级元素和其他元素都在一行上*/
32             list-style-type: none;
33         }
34     </style>
35 </head>
36 <body>
37     <div class="container">
38         <div class="header">
39             <ul>
40                 <li>列表项目</li>
41                 <li>列表项目</li>
42                 <li>列表项目</li>
43                 <li>列表项目</li>
44             </ul>
45         </div>
46     </div>
47 </body>
48 </html>

3.由table演变来的一种居中

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .t{
 8             width: 200px;
 9             height: 200px;
10             background-color: aquamarine;
11         }        
12     </style>
13 </head>
14 <body>
15     <div class="t">
16         <p>哈哈</p>
17     </div>
18 </body>
19 </html>

用table设置水平垂直居中

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .t{
 8             display: table;/*外层div变为table*/
 9             width: 200px;
10             height: 200px;
11             background-color: aquamarine;
12         }
13         p{
14             display: table-cell;/*设置为单元格*/
15             text-align: center;/*水平居中*/
16             vertical-align: middle;/*垂直居中*/
17         }
18     </style>
19 </head>
20 <body>
21     <div class="t">
22         <p>哈哈</p>
23     </div>
24 </body>
25 </html>

4.利用伸缩盒居中

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .outer{
 8             width: 200px;
 9             height: 200px;
10             background-color: aquamarine;
11         }
12         .inner{
13             width: 100px;
14             height: 100px;
15             background-color: antiquewhite;
16         }
17     </style>
18 </head>
19 <body>
20     <div class="outer">
21         <div class="inner">
22             哈哈
23         </div>
24     </div>
25 </body>
26 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .outer{
 8             display: -webkit-box;/*设置为盒子*/
 9             width: 200px;
10             height: 200px;
11             background-color: aquamarine;
12             -webkit-box-pack:center;/*水平居中*/
13             -webkit-box-align:center;/*垂直居中*/
14         }
15         .inner{
16             width: 100px;
17             height: 100px;
18             background-color: antiquewhite;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="outer">
24         <div class="inner">
25             哈哈
26         </div>
27     </div>
28 </body>
29 </html>

接下来设置文字居中

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .outer{
 8             display: -webkit-box;/*设置为盒子*/
 9             width: 200px;
10             height: 200px;
11             background-color: aquamarine;
12             -webkit-box-pack:center;/*水平居中*/
13             -webkit-box-align:center;/*垂直居中*/
14         }
15         .inner{
16             display: -webkit-box;/*设置为盒子*/
17             -webkit-box-pack:center;/*水平居中*/
18             -webkit-box-align:center;/*垂直居中*/
19             width: 100px;
20             height: 100px;
21             background-color: antiquewhite;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="outer">
27         <div class="inner">
28             哈哈
29         </div>
30     </div>
31 </body>
32 </html>