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>

相关阅读:
Exchange 2013与 Office Web Apps 整合
 SharePoint2013 以其他用户登录和修改AD域用户密码功能
 sharepoint 2010 自定义页面布局
 sharepoint 2010 记录管理对象模型
 SharePoint2010 对象模型关联列表
 在SharePoint Server 2010中更改“我的网站”
xenapp 6.5 客户端插件第一次安装总是跳到官网
 如何解决在Windows Server 2008 R2 上安装证书服务重启后出现 CertificationAuthority 91错误事件
 在Win7 Hyper-v虚拟机中挂接真实机的声卡
 win8 中如何删除共享文件夹用户名和密码
原文地址：https://www.cnblogs.com/songsongblue/p/11050842.html