<!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. PHP文件包含小结

    协议 各种协议的使用有时是关键 file协议 file后面需是///,例如file:///d:/1.txt 也可以是file://e:/1.txt,如果是在当前盘则可以file:///1.txt 如果 ...

  2. python3中使用xpath无法定位，为什么一直返回空列表？

    tbody问题: 在爬去某些网站一些信息的时候,xpath工具上显示类容是正确的,但是在scrapy代码中一直返回空列表 Scrapy的部分代码: class LotteryspiderSpider( ...

  3. 【webssh】shellinabox搭建

    shellinabox搭建 centos环境安装命令 # yum install epel-release # yum install shellinabox 启动与关闭: service shell ...

  4. [Codeforces #190] Tutorial

    Link: Codeforces #190 传送门 A: 明显答案为$n+m-1$且能构造出来 #include <bits/stdc++.h> using namespace std; ...

  5. BZOJ 3505 [Cqoi2014]数三角形（组合数学）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3505 [题目大意] 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个. 注 ...

  6. 【找规律】【递归】XVII Open Cup named after E.V. Pankratiev Stage 4: Grand Prix of SPb, Sunday, Octorber 9, 2016 Problem F. Doubling

    题意: 给你一个n,问你R(n)对应的字符串长度最小的是啥. dp打个表出来,f(i)表示i值对应的字符串的最小长度,发现f(1)=1,f(2)=2,其他的情况下,若是偶数,则恰好在其外面加一对中括号 ...

  7. 【推导】Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017) B. Arpa and an exam about geometry

    题意:给你平面上3个不同的点A,B,C,问你能否通过找到一个旋转中心,使得平面绕该点旋转任意角度后,A到原先B的位置,B到原先C的位置. 只要A,B,C构成等腰三角形,且B为上顶点.那么其外接圆圆心即 ...

  8. 【动态规划】【线段树】 Codeforces Round #426 (Div. 1) B. The Bakery

    给你一个序列,让你划分成K段,每段的价值是其内部权值的种类数,让你最大化所有段的价值之和. 裸dp f(i,j)=max{f(k,j-1)+w(k+1,i)}(0<=k<i) 先枚举j,然 ...

  9. 关于网络流sap算法

    今天终于学习了网络流..之前一直很怕这类问题,个人觉得网络流算是图论里面最难的了.... sap学习下来感觉一般,关于解法都是意识流,细节也是蛮多的.. 我这里先贴一份模版,自已也加了点注释(只是个人 ...

  10. python基础之单例模式

    单例模式: 什么是单例模式? 基于某种方法实例化多次得到实例是同一个 实现方法: ip = '1.1.1.1' port = 3306 # 假装来自配置文件 #方法一:定义类方法进行判断 class ...