HTML5 移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中 

 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>

 

posted @ 2017-12-05 15:51  Sunsin  阅读(1840)  评论(0)  编辑  收藏  举报