zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    mysql基础(三)
    mysql基础(二)
    Mysql基础(一)
    Less32-Less-33
    Less-27
    Less-26
    Less-25
    Less-23
    Less18-Less19
    Less13-Less-14
  • 原文地址:https://www.cnblogs.com/cisum/p/7987422.html
Copyright © 2011-2022 走看看