1、如何让一个盒子水平垂直居中
1 //已知宽高 2 <div class="div1"></div> 3 <style> 4 .div1{ 5 width:400px; 6 height:400px; 7 position:absolute; 8 left:50%; 9 top:50% 10 margin:-200px 0 0 -200px; 11 } 12 </style> 13 14 //未知宽高 15 <!DOCTYPE html> 16 <html lang="en"> 17 <head> 18 <meta charset="UTF-8"> 19 <title>Document</title> 20 <style> 21 .div1{ 22 position: absolute; 23 left: 0; 24 top: 0; 25 bottom: 0; 26 right: 0; 27 margin: auto; 28 border: 1px solid #000; 29 width: 400px; 30 height: 400px; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="div1"></div> 36 </body> 37 </html> 38 39 //未知宽高方法二： 40 <!DOCTYPE html> 41 <html lang="en"> 42 <head> 43 <meta charset="UTF-8"> 44 <title>Document</title> 45 <style> 46 .div1{ 47 position: absolute; 48 left: 50%; 49 top: 50%; 50 transform: translate(-50%,-50%); 51 border: 1px solid #000; 52 width: 400px; 53 height: 400px; 54 } 55 </style> 56 </head> 57 <body> 58 <div class="div1"></div> 59 </body> 60 </html>
2、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。
1 // 方法一： 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 .div1{ 9 width: 100px; 10 height: 200px; 11 background-color: #ccc; 12 float: left; 13 } 14 .div2{ 15 background-color: #ff0; 16 margin-left: 100px; 17 height: 200px; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="div1"></div> 23 <div class="div2"></div> 24 </body> 25 </html> 26 27 //方法二： 28 <head> 29 <meta charset="UTF-8"> 30 <title>Document</title> 31 <style> 32 .div{ 33 display: flex; 34 flex-direction: row; 35 align-items: center; 36 } 37 .div1{ 38 flex-basis: 100px; 39 background-color: #ccc; 40 height: 300px; 41 } 42 .div2{ 43 background-color: #ff0; 44 height: 300px; 45 flex-grow: 1; 46 } 47 </style> 48 </head> 49 <body> 50 <div class="div"> 51 <div class="div1"></div> 52 <div class="div2"></div> 53 </div> 54 </body>
