使用css3的flex模型实现一个居中布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>flex居中布局</title> 6 <style type="text/css"> 7 html, 8 body { 9 border: solid 1px yellow; 10 height: 100%; 11 } 12 #out { 13 width: 100%; 14 height: 100%; 15 margin: auto; 16 border: solid 1px black; 17 display: flex; 18 /* justify-content: center; 19 align-items: center; */ 20 } 21 #mid { 22 width: 300px; 23 height: 300px; 24 border: solid 1px blue; 25 26 /* position: absolute; 27 left: 50%; 28 top: 50%; 29 transform: translate(-50%, -50%); */ 30 31 display: flex; 32 margin: auto; 33 /*flex子元素设置margin:auto， 34 相当于flex容器元素设置 35 justify-content: center;align-items: center; 36 */ 37 } 38 #in { 39 width: 100px; 40 height: 100px; 41 border: solid 1px red; 42 margin: auto; 43 } 44 </style> 45 </head> 46 <body> 47 <div id="out"> 48 <div id="mid"> 49 <div id="in"></div> 50 </div> 51 </div> 52 </body> 53 </html>
