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. 用MVVM模式开发中遇到的零散问题总结（3）——自制正则表达式万能绑定转换器

    原文:用MVVM模式开发中遇到的零散问题总结(3)--自制正则表达式万能绑定转换器 前言 最近接受了3个项目的洗礼,出差近3个月,各种北京.广州.昆明来回奔波,好久没写博客了,之前我觉得我遇到的问题都 ...

  2. C++ Boost库简介（一些自己的感受）

    boost是一个准标准库,相当于STL的延续和扩充,它的设计理念和STL比较接近,都是利用泛型让复用达到最大化.不过对比STL,boost更加实用.STL集中在算法部分,而boost包含了不少工具类, ...

  3. 常用的shell（备份数据库、备份网站、切割访问日志）

    备份网站程序 #!/bin/bash /bin/tar czf /mnt/backup_website/web_$(date +%Y%m%d_%H%M%S).gz.tar /mnt/wwwroot/w ...

  4. Python标准库(3.x): itertools库扫盲

    itertools functions accumulate() compress() groupby() starmap() chain() count() islice() takewhile() ...

  5. PySide——Python图形化界面入门教程(三)

    PySide——Python图形化界面入门教程(三) ——使用内建新号和槽 ——Using Built-In Signals and Slots 上一个教程中,我们学习了如何创建和建立交互widget ...

  6. Linux7下配置Nginx站点.

    今天闲来无事,把服务器重新配置了一下,作为开发者,实际上很多人都是长时间不去配置服务器的,所以曾经很多东西又忘掉了差不多. 特在此分享一下配置成功后的配置文件内容. 其实配置后的文件内容很简单,也没有 ...

  7. chrome 里面js提示Provisional headers are shown错误

    参考:http://stackoverflow.com/questions/21177387/caution-provisional-headers-are-shown-in-chrome-debug ...

  8. Qt 访问网络的 HttpClient（封装QNetworkAccessManager，且有服务端）

    Qt 使用 QNetworkAccessManager 访问网络,这里对其进行了简单的封装,访问网络的代码可以简化为: 1 2 3 HttpClient("http://localhost: ...

  9. 解除.NET中虚拟路径的疑惑

    今天部署产品时,发现一个涉及到路径错误的bug,在开发环境下都OK,但是到了测试环境中却一直报错,经过一番排查,原来错误出在了HttpContext.Current.Server.MapPath这个方 ...

  10. uni-app中vue组件父子值传递

    一.父组件向子组件传递数据(props) <template> <view class="container" style="background: # ...