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 程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时 ...

随机推荐

RDIFramework.NET框架SOA解（集Windows服务、WinForm形式和IIS发布形式）-分布式应用程序
RDIFramework.NET框架SOA解决方式(集Windows服务.WinForm形式与IIS形式公布)-分布式应用 RDIFramework.NET,基于.NET的高速信息化系统开发.整合框架 ...
精装友好联络算法实现借壳和RI
精装友好联络会注册算法分析: 1. 许可证由三部分组成. 2. 的登记号的第一部分是顺序编号0x6d模 3. 登记代码的第二部分: 先将订单号与0XB25F1异或,将异或后的结果转换成十进制字符串 ...
Ajax请求小结
参数说明 ajax请求异步刷新页面=把需要异步刷新的页面单独写成一个.cshtml进行操作$.ajax({}); -------ajax方法.type: ------- 类型,此处为“POST” 还有 ...
x:Static
用途:访问代码中的变量等后台定义一个变量 public partial class GetStaticFromBackgroundCode : Window { public static stri ...
sql server DateTime与DateTime2的区别
DateTime字段类型对应的时间格式是 yyyy-MM-dd HH:mm:ss.fff ,3个f,精确到1毫秒(ms),示例 2014-12-03 17:06:15.433 .DateTime2字段 ...
jquery对象及页面加载完成写法
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
C#热敏打印图片串口打印图片
原文:C#热敏打印图片串口打印图片如图,一步一步慢慢调出来的 //串口通信类 public System.IO.Ports.SerialPort serialPort = null; serial ...
【全面解禁!真正的Expression Blend实战开发技巧】第二章你好，UI设计师
原文:[全面解禁!真正的Expression Blend实战开发技巧]第二章你好,UI设计师你好,UI设计师曾几何时我从没想过要与艺术家打交道,但是Silverlight改变了这一切.UI设计师 ...
murmurhash2算法和 DJB Hash算法是目前最流行的hash算法
murmurhash2算法和 DJB Hash算法是目前最流行的hash算法 1.DJB HASH算法 1 2 3 4 5 6 7 8 9 10 11 /* the famous DJB Hash ...
问题记录，Release模式和Debug运行效果不一样，Release必须加延时
这个程序大体是这样一个逻辑,通过win32程序与设备交互,主线程先向设备发送命令要求循环验证然后一个线程专门负责接收设备返回信息两边通过全局变量的变化来交流,主线程通过接收线程收到的信息设置界面 ...