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全屏居中的更多相关文章

使用CSS3实现响应式标题全屏居中和站点前端性能
要实现标题全屏居中(同一时候在垂直和水平方向居中).有若干种方法,包含使用弹性布局.表格单元.绝对定位和自己主动外边距等. 全屏居中当中眼下比較流行也比較easy理解的方法是使用绝对定位+偏移实现. ...
height:100%不起作用（无效），div全屏
当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...
jquery 图片比例不变，全屏居中
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...
网页js，DIV全屏布局
<script type="text/javascript"> $(document).ready(function(){ findDimensions(); }); ...
Swiper单页网站简单案例（全屏网页）
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
div的全屏与退出全屏
div的全屏与退出全屏作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...
点击图片video全屏
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
html5实现全屏的api方法
参考地址 [进入和退出全屏] // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); docum ...
delphi程序全屏显示无标题栏覆盖整个屏幕
delphi 简单实现程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时有用的,具体代码如下,感兴趣的朋友可以参考下哈 delphi 程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时 ...

随机推荐

[转]Nodejs开发框架Express4.x开发手记
Express: ?web application framework for?Node.js? Express 是一个简洁.灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮 ...
SQL Server数据库碎片整理
碎片产生在SQL Server中,存储数据的最小单位是页,每一页所能容纳的数据为8060字节.而页的组织方式是通过B树结构 SQL Server向每个页内存储数据的最小单位是表的行(Row) ...
linuxC动态内存泄漏追踪方法
C里面没有垃圾回收机制,有时候你申请了动态内存却忘记释放,这就尴尬了(你的程序扮演了强盗角色,有借有还才是好孩子).当你想找出内存泄露的地方时,有的投入海量的代码中,头痛不已.还好GNU C库提供了些 ...
设置InputBox等提示框的字体以及样式
InputBox等窗体的字体大小设置方法 Graphics.DefFontData.Height:=48; Graphics.DefFontData.Style:=[fsBold,fsItalic, ...
全面剖析Redis Cluster原理和应用（good）
redis redis cluster注意的问题 : 1.‘cluster-require-full-coverage’参数的设置.该参数是redis配置文件中cluster模式的一个参数,从字面上基 ...
发布ActiveX控件
最近我们正在研究ActiveX技术.我们使用Delphi 5创建了一个具有ActiveForm的ActiveX控件应用程序.这个控件产生一个.OCX文件.现在,我们需要把这个控件部署在服务器端,在用户 ...
char、char*、char**数组（有图，非常清楚）good
平时都用的是char数组,基本忘记了char*数组和char**数组该怎么用了 char s1[10]; s1[0] s1[1]等都是char s1是char*,等同于&s1[0] char* ...
Qt使用windows API获取程序运行时占用内存 good
使用的是psapi.h中的GetProcessMemoryInfo函数,但是运行到该函数时就强制退出了. 后来,百度到原因是原来Qt编译时加了-mthread,createprocess时要使的Ha ...
Building PySide on Microsoft Windows
Prerequisites MS Visual Studio Express 2008 [microsoft.com] NOTE: Visual Studio Express 2010 is not ...
java多线程之线程安全
线程安全和非线程安全是多线程的经典问题,非线程安全会在多个线程对同一个对象并发访问时发生. 注意1: 非线程安全的问题存在于实例变量中,如果是方法内部的私有变量,则不存在非线程安全问题. 实例变量是对 ...