1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 body { 11 margin: 0; 12 } 13 14 .containerCenterAlert { 15 width: 300px; 16 height: 300px; 17 background-color: #ff0; 18 position: absolute; 19 top: 50%; 20 left: 50%; 21 margin-left: -150px; 22 margin-right: -150px; 23 } 24 25 .containerMobileCenterAlert { 26 /* height: 50%; */ 27 width: 50%; 28 position: absolute; 29 top: 50%; 30 left: 50%; 31 background-color: #f00; 32 -moz-transform: translate(-50%, -50%); 33 -ms-transform: translate(-50%, -50%); 34 -webkit-transform: translate(-50%, -50%); 35 transform: translate(-50%, -50%); 36 } 37 </style> 38 </head> 39 40 <body> 41 <!-- <div class="containerCenterAlert"></div> --> 42 <div class="containerMobileCenterAlert"> 43 旧数据 旧数据 旧数据 旧数据 44 </div> 45 </body> 46 47 </html>