1.将浮动居中
这需要三个盒子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .Bar{ 12 width: 500px; 13 height: 500px; 14 background-color: yellow; 15 16 } 17 /*这里利用将在Bar盒子后面加入father子盒子 18 因为只能放一个 所以会居中 然后在加入一个浮动的盒子 19 作为father的子盒子根据宽度一样添加进去*/ 20 .father{ 21 width: 100px; 22 height: 100px; 23 background-color: cornflowerblue; 24 overflow: hidden; 25 margin: 0 auto; 26 } 27 /*浮动的*/ 28 .set{ 29 width: 100px; 30 height: 150px; 31 32 background-color: darkcyan; 33 margin: 0 auto; 34 float: left; 35 } 36 37 </style> 38 </head> 39 <body> 40 <div class="Bar"> 41 <div class="father"> 42 <div class="set"> 43 </div> 44 </div> 45 </div> 46 47 </body> 48 </html>