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>