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月）
从目前来看，新的浏览器基本都支持，除非项目有特别的要求，完全可以放心使用。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title></title>
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6.     <meta name="viewport" content="width=device-width">
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <style>
  9.         html,body {
  10.             margin: 0;
  11.             padding: 0;
  12.             width:100%;
  13.             height:100%;
  14.             overflow: hidden;
  15.             background: #000;
  16.         }
  17.         .playerBox {
  18.             border: 1px solid #f7ff00;
  19.             width: 90vw;		/* 宽度  页面宽度的90% */
  20.             height: 60vh;		/* 高度  页面高度的60% */
  21.             background: #75dca2; 
  22.             /* 容器自动水平居中 */
  23.             margin: 0px auto;  
  24.  
  25.             /* 实现垂直居中 距顶部高度  也可以写成 calc((100vh - 60vh)/2) */
  26.             margin-top: 20vh;				
  27.  
  28.             text-align: center;	/* 文字水平居中 */
  29.             line-height: 60vh;	/* 文字垂直居中 */
  30.             color: #fff;
  31.         }
  32.     </style>
  33. </head>
  34.  
  35. <body>
  36.     <div id="playerBox" class="playerBox">我上下左右居中</div>
  37. </body>
  38.  
  39. </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. Emgu-WPF学习使用-中值模糊

    原文:Emgu-WPF学习使用-中值模糊 实现效果: 实现途径: 前提:Image File-> System.Drawing.Bitmap->Image<Bgr, byte> ...

  2. js,css引用顺序设定

    遇到的困难 在ASP .NET MVC里面,会使用_Layout.cshtml来绘制一些全局的公共页面,以及引用相关的css和js而在每个独立的页面中,也有自己独立的js一般来说,希望公共的js放在独 ...

  3. WPF依赖项属性不需要包装属性也可以工作

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  4. Introduction To The Smart Client Software Factory (CAB/SCSF Part 18)

    1. Shell This is the start-up project for the solution. It is very similar to the start-up projects ...

  5. Plupload上传插件中文文档

    Plupload上传插件中文帮助文档 如有疑问,加群交流:646104701 下载地址:https://www.plupload.com/download/ 配置参数 实例化一个plupload对象时 ...

  6. Visual Studio更改编码格式为“UTF-8”

    原文:Visual Studio更改编码格式为"UTF-8" 用VS2015新建了个Python文件,在VS2015打开时中文显示正常, 用Visual Studio Code文本 ...

  7. cordova-plugin-local-notifications发送Android本地消息

    原文:cordova-plugin-local-notifications发送Android本地消息 1.GitHub源代码地址: https://github.com/katzer/cordova- ...

  8. Win10《芒果TV》跨年邀你嗨唱，同步直播《湖南卫视2017-2018跨年演唱会》

    由天天兄弟.快本家族联袂主持,不容错过的年度盛典<湖南卫视2017-2018跨年演唱会>将于2017年12月31日19:30起由芒果TV同步直播,果妈备上礼物邀您一起跨年嗨唱. 跨年邀你嗨 ...

  9. HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容。

    解决方法: 找到目录浏览,打开,点击右边的启用就OK了.

  10. SQLite Expert Professional 打开加密SQLite数据库

    原文 SQLite Expert Professional 打开加密数据库 (已修改) 版本:sqlite expert professional 4.2.0.739 (x86) 目的:用SQLite ...