vh、vw、vmin、vmax介绍

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

浏览器兼容性

（1）桌面 PC

Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）

（2）移动设备

Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8 版起就完美支持（2014年9月）
从目前来看，新的浏览器基本都支持，除非项目有特别的要求，完全可以放心使用。

<!DOCTYPE html>

<html lang="en">

<head>

    <title></title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <meta name="viewport" content="width=device-width">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>

        html,body {

            margin: 0;

            padding: 0;

            width:100%;

            height:100%;

            overflow: hidden;

            background: #000;

        }

        .playerBox {

            border: 1px solid #f7ff00;

            width: 90vw;		/* 宽度  页面宽度的90% */

            height: 60vh;		/* 高度  页面高度的60% */

            background: #75dca2; 

            /* 容器自动水平居中 */

            margin: 0px auto;  

            /* 实现垂直居中 距顶部高度  也可以写成 calc((100vh - 60vh)/2) */

            margin-top: 20vh;				

            text-align: center;	/* 文字水平居中 */

            line-height: 60vh;	/* 文字垂直居中 */

            color: #fff;

        }

    </style>

</head>

<body>

    <div id="playerBox" class="playerBox">我上下左右居中</div>

</body>

</html>

　　

用CSS3 vh 简单实现DIV全屏居中的更多相关文章

  1. 使用CSS3实现响应式标题全屏居中和站点前端性能

    要实现标题全屏居中(同一时候在垂直和水平方向居中).有若干种方法,包含使用弹性布局.表格单元.绝对定位和自己主动外边距等. 全屏居中 当中眼下比較流行也比較easy理解的方法是使用绝对定位+偏移实现. ...

  2. height:100%不起作用（无效），div全屏

    当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...

  3. jquery 图片比例不变，全屏居中

    <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...

  4. 网页js，DIV全屏布局

    <script type="text/javascript"> $(document).ready(function(){ findDimensions(); }); ...

  5. Swiper单页网站简单案例（全屏网页）

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  6. div的全屏与退出全屏

    div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...

  7. 点击图片video全屏

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. html5实现全屏的api方法

    参考地址 [进入和退出全屏] // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); docum ...

  9. delphi程序全屏显示无标题栏覆盖整个屏幕

    delphi 简单实现程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时有用的,具体代码如下,感兴趣的朋友可以参考下哈 delphi 程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时 ...

随机推荐

  1. hibernate关于多对多注解配置

    Game实体类配置关系 @Entity @Table(name = "game") public class Game { @Id @GeneratedValue private ...

  2. Web前端开发人员实用Chrome插件收集

    越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...

  3. 2-18-搭建mysql集群实现高可用

          1 环境清理以及安装 1.1  mysql旧版本清除 准备5台虚拟机,分配如下 mysql管理结点:xuegod1.cn IP:192.168.10.31  (安装server.clien ...

  4. qt 透明度设置（setWindowOpacity 和 setAutoFillBackground 和 带透明度的画刷填充就好了）

    1,父窗口透明// 设置背景图片 QPalette pa;setAutoFillBackground(true);pa.setBrush(QPalette::Background,QBrush(QPi ...

  5. 【C#】wpf查找父子节点

    原文:[C#]wpf查找父子节点 using System; using System.Collections.Generic; using System.Linq; using System.Tex ...

  6. [原译]实现IEnumerable接口&理解yield关键字

    原文:[原译]实现IEnumerable接口&理解yield关键字 著作权声明:本文由http://leaver.me 翻译,欢迎转载分享.请尊重作者劳动,转载时保留该声明和作者博客链接,谢谢 ...

  7. Delphi Android ActivityManager（提供了接口, 利用它可以方便的对Memory, Processes, Task, Service 等进行管）

    ActivityManager:   对Activity交互提供了接口, 利用它可以方便的对Memory, Processes, Task, Service 等进行管理,. 这里对Delphi接口进行 ...

  8. Win8Metro(C#)数字图像处理--2.13Roberts边缘检测

    原文:Win8Metro(C#)数字图像处理--2.13Roberts边缘检测  [函数名称] 图像Roberts边缘检测函数RobertEdgeProcess(WriteableBitmap s ...

  9. 程序定义了多个入口点。使用 /main (指定包含入口点的类型)进行编译

    原文:请使用/main进行编译,以指定包含入口点类型 在使用VS工具初学C#的时候需要不停的写小程序,觉得每次都新建项目太过麻烦,所以试着把程序写在一个项目下面,结果编译的时候出错了,因为我每个小程序 ...

  10. 职业规划 - DREAM START

    前言 最近面试了好多公司,得出一个结论:做一份详细的计划.一个程序员,不只是写写代码这么简单的事,一种更高的境界则是在代码中.系统的设计中,能找到人生的意义,简单说就是生活的道理.我一直认为:当你在一 ...