1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style> 8 /*第一种方法*/ 9 /*.parent { 10 width: 800px; 11 height: 500px; 12 border: 2px solid #000; 13 position: relative; 14 } 15 16 .child { 17 width: 200px; 18 height: 200px; 19 margin: auto; 20 position: absolute; 21 top: 0; 22 left: 0; 23 bottom: 0; 24 right: 0; 25 background-color: red; 26 }*/ 27 /*第二种方法*/ 28 /*.parent { 29 width:800px; 30 height:500px; 31 border:2px solid #000; 32 display:table-cell; 33 vertical-align:middle; 34 text-align: center; 35 } 36 .child { 37 width:200px; 38 height:200px; 39 display:inline-block; 40 background-color: red; 41 }*/ 42 /*第三种方法*/ 43 44 .parent { 45 width: 800px; 46 height: 500px; 47 border: 2px solid #000; 48 display: flex; 49 justify-content: center; 50 align-items: center; 51 } 52 53 .child { 54 width: 200px; 55 height: 200px; 56 background-color: red; 57 } 58 /*第四种方法*/ 59 /*.parent { 60 width:800px; 61 height:500px; 62 border:2px solid #000; 63 position:relative; 64 } 65 .child { 66 width:300px; 67 height:200px; 68 margin:auto; 69 position:absolute;/*设定水平和垂直偏移父元素的50%，*/ 70 71 再根据实际长度将子元素上左挪回一半大小*/ 72 /* left:50%; 73 top:50%; 74 margin-left: -150px; 75 background-color: red; 76 }*/ 77 </style> 78 </head> 79 80 <body> 81 <div class="parent"> 82 <img class="child" src="img/cloud_07.png"> 83 84 </img> 85 86 </div> 87 </body> 88 89 </html>