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. ThreadPool类(线程池)

    原文:ThreadPool类(线程池) CLR线程池并不会在CLR初始化时立即建立线程,而是在应用程序要创建线程来运行任务时,线程池才初始化一个线程.线程池初始化时是没有线程的,线程池里的线程的初始化 ...

  2. html 自制属性

    HTML5 允许扩展的(自制的)属性,以 data- 开头 <label id="id0" data-value="0">0</label&g ...

  3. linuxC动态内存泄漏追踪方法

    C里面没有垃圾回收机制,有时候你申请了动态内存却忘记释放,这就尴尬了(你的程序扮演了强盗角色,有借有还才是好孩子).当你想找出内存泄露的地方时,有的投入海量的代码中,头痛不已.还好GNU C库提供了些 ...

  4. jquery模拟飞秋

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. Mysql数据库表的自增主键ID号乱了，需要重新排列。

    Mysql数据库表的自增主键ID号乱了,需要重新排列. 原理:删除原有的自增ID,重新建立新的自增ID. 1,删除原有主键:ALTER TABLE `table_name` DROP `id`; 2, ...

  6. WebBrowser 的 DocumentCompleted事件不执行的解决方法

    原文:WebBrowser 的 DocumentCompleted事件不执行的解决方法 WebBrowser 的 DocumentCompleted事件不执行的解决方法: 使用WebBrowser的P ...

  7. UWP入门（一） -- 先写几个简单控件简单熟悉下(别看这个)

    原文:UWP入门(一) -- 先写几个简单控件简单熟悉下(别看这个) 1. MainPage.xmal <Grid Background="{ThemeResource Applica ...

  8. HUSTOJ的Windows版评判内核（限制内存使用）

    HUSTOJ的Windows版评判内核(一) 作者:游蓝海 个人主页:http://blog.csdn.net/you_lan_hai 2013.4.9 注:最新版本项目地址:https://gith ...

  9. C++&Win32写的空当接龙

    上学期做课程设计,老师让我做windows自带的空当接龙游戏,写了一个礼拜,完全仿windows的呵呵.不过也不全一样,有一些细节一直没有时间弄,没办法最近比较懒... 与windows下的相比,我做 ...

  10. qt sql事务操作

    事务是数据库的一个重要功能,所谓事务是用户定义的一个数据库操作序列,这些操作要么全做要么全不做,是一个不可分割的工作单位.在Qt中用transaction()开始一个事务操作,用commit()函数或 ...