Tips_关闭按钮的简单实现 && Felx实现水平垂直居中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 margin : 0; 9 padding: 0; 10 } 11 /* 关闭按钮 */ 12 .card{ 13 width: 200px; 14 height: 240px; 15 border: 1px solid #ccc; 16 border-radius: .2em; 17 18 margin: 100px auto; 19 } 20 .cardHeader{ 21 overflow: hidden; 22 height: 40px; 23 line-height: 40px; 24 border-bottom: 1px solid #ccc; 25 } 26 .closeCard{ 27 display: inline-block; 28 padding: 0 10px; 29 font-size: 24px; 30 font-family: helvetica; 31 float: right; 32 cursor:pointer; 33 color: #ccc; 34 } 35 .closeCard:hover{ 36 color: #007; 37 } 38 39 /* flex实现水平垂直居中 */ 40 .father{ 41 /*以下三个设置*/ 42 display: flex; 43 justify-content: center; 44 align-items: center; 45 46 width: 400px; 47 height: 400px; 48 border: 1px solid #ccc; 49 50 margin: 100px auto; 51 52 } 53 .child{ 54 width: 40px; 55 height: 60px; 56 background: #ccc; 57 } 58 </style> 59 </head> 60 <body> 61 <h3>关闭按钮</h3> 62 <div class="card"> 63 <div class="cardHeader"> 64 <span class="closeCard"> ×</span> 65 </div> 66 </div> 67 68 <h3>flex实现水平垂直居中</h3> 69 <div class="father"> 70 <div class="child"></div> 71 </div> 72 </body> 73 </html>