<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         body {

             margin: 0;

         }

         .containerCenterAlert {

             width: 300px;

             height: 300px;

             background-color: #ff0;

             position: absolute;

             top: 50%;

             left: 50%;

             margin-left: -150px;

             margin-right: -150px;

         }

         .containerMobileCenterAlert {

             /* height: 50%; */

             width: 50%;

             position: absolute;

             top: 50%;

             left: 50%;

             background-color: #f00;

             -moz-transform: translate(-50%, -50%);

             -ms-transform: translate(-50%, -50%);

             -webkit-transform: translate(-50%, -50%);

             transform: translate(-50%, -50%);

         }

     </style>

 </head>

 <body>

     <!-- <div class="containerCenterAlert"></div> -->

     <div class="containerMobileCenterAlert">

         旧数据 旧数据 旧数据 旧数据

     </div>

 </body>

 </html>

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

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

    pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...

  2. CSS之常见布局|常用单位|水平垂直居中

    常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:f ...

  3. CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...

  4. CSS定位与布局

    我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容.网页布局的好与坏,直接决定了网页最终的展示效果.PC端常见的网页布局形式有两列布局.三列布局等.在CSS中,我们通常使 ...

  5. html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

    对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...

  6. css — 定位、背景图、水平垂直居中

    目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...

  7. [19/06/07-星期五] CSS基础_布局&定位&背景样式

    一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  9. Html5移动端页面自适应百分比布局

    按百分比布局,精度肯定不会有rem精确 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

随机推荐

  1. 《TDD》-火花

    1,规定对天才来说多余,对蠢才来说无效,只对中间这一部分有用(我至今没见到过天才,蠢才到是不少) 2,设计上顿悟的火花一闪而过,没有规律可循.良好的测试无法保证你在需要的时候灵感乍现,但是给人信心的良 ...

  2. EOJ Monthly 2018.8 D. Delivery Service-树上差分(边权/边覆盖)(边权转点权)(模板题)

    D. Delivery Service 单测试点时限: 2.5 秒 内存限制: 512 MB EOJ Delivery Service Company handles a massive amount ...

  3. RecyclerView混合布局

    本来想把公司的UI图放上来,考虑到版权等未知因素,就拿网上的图来说了: 类似的这种布局,有的一行只有一张图片,有的一行有两个元素,有个一行有三个元素..就是混合的布局方式 参考文献: https:// ...

  4. jdbc 回顾

    JDBC实现基本的CRUD示例 private static void insertTest() throws SQLException { String dbURL = "jdbc:mys ...

  5. Codeforces #447 Div.2 Tutorial

    Problem A:QAQ 给一个字符串,求出可非连续的QAQ序列有多少个. Analysis:比较水的一道题,记录每一个Q的位置,预处理A的个数即可 然而还是fst了,原因是未考虑一个Q都没有的极端 ...

  6. hdu 5868 2016 ACM/ICPC Asia Regional Dalian Online 1001 (burnside引理 polya定理）

    Different Circle Permutation Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 262144/262144 K ...

  7. php分布式缓存系统 Memcached 入门

    Memcached 是一个分布式的缓存系统, 但是 Memcachd 到底是什么意思,有什么作用呢?缓存一般用来保存一些经常被存取的数据和资源(例如:浏览器会将访问过的网页会话缓存起来),因为通过缓存 ...

  8. 将WPF版的弹幕播放器给优化了一下

    年前较闲的时候研究了一下WPF的性能优化,练手的时将之前写的弹幕播放器给重新写了一下.年前的时间不大够,没有写完,这两天接着弄了一下,基本上弄得差不多了. 主要重写了底层的渲染算法,优化后效果还是非常 ...

  9. error C2556: 'const char &MyString::operator [](int)' : overloaded function differs only by return type from 'char &MyString::operator [](int)'

    char & operator[](int i);const char & operator[](int i);/*const char & operator(int i);* ...

  10. ThreadLocal用法详解和原理（转）

    本文转自https://www.cnblogs.com/coshaho/p/5127135.html 感谢作者 一.用法 ThreadLocal用于保存某个线程共享变量:对于同一个static Thr ...