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. 使用 advanced installer 为 winform 做自动更新

    原文:使用 advanced installer 为 winform 做自动更新 advanced installer 是一款打包程序,基于 windows installer 并扩展了一些功能,比如 ...

  2. XF 按钮控件

    <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http:/ ...

  3. erp的核心代码，替代orm

    public static SqlParameter[] get_array_list<T>(ArrayList rows) where T : class { Hashtable sql ...

  4. WPF如何判断PNG中的点是透明的

    最近想用WPF做个空战游戏,其中就要解决子弹是否击中飞机的问题.这里面飞机用了PNG图片,大家都知道飞机是不规则图案,如何判断子弹碰撞成了一个难题. 好在我在网上找到了一个可以获取bitmap像素点颜 ...

  5. Win10《芒果TV》更新v3.5.0夏至版：会员尊享蓝光画质，关联本地视频播放

    在Win10秋季创意者更新前夕,Win10版<芒果TV>全平台同步更新夏至版v3.5.0,新增会员蓝光画质,关联本地视频播放,进一步提升使用体验. Win10版<芒果TV>V3 ...

  6. 算法之--回溯法-迷宫问题【python实现】

    题目描述 定义一个二维数组N*M(其中2<=N<=10;2<=M<=10),如5 × 5数组下所示: int maze[5][5] = { 0, 1, 0, 0, 0, 0,  ...

  7. vs编译在win xp电脑上运行的win32程序遇到的问题记录（无法定位程序输入点GetTickCount64于动态链接库KERNEL32.dll）

    直接编译后运行,弹出提示框:不是有效的win32应用程序 像之前那样把msvcr110.dll复制过去依然报错: 这是因为vs2012编译的win32程序用到的系统函数在xp环境上对应不上.之前转载的 ...

  8. 用JavaScriptSerializer解析JSON

    引用System.Web.Extensions using System.Web.Script.Serialization; var serializer = new JavaScriptSerial ...

  9. char、char*、char**数组（有图，非常清楚）good

    平时都用的是char数组,基本忘记了char*数组和char**数组该怎么用了 char s1[10]; s1[0] s1[1]等都是char s1是char*,等同于&s1[0] char* ...

  10. Qt4.85静态编译配置VS动态编译（非常详细的图文教程）

    http://www.qter.org/forum.php?mod=viewthread&tid=1409&extra=page%3D1&page=1