用CSS3 vh 简单实现DIV全屏居中
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 程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时 ...
随机推荐
- 微信小程序把玩（十八）picker组件
原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...
- 如何把zip文件直接解压到内存里？
解压到硬盘再读进来耽误时间. var LZip: TZipFile; LMem: TMemoryStream; LBytes: TBytes;begin LZip := TZipFile.Cr ...
- Wolf RPG Editor游戏解包
前言 使用arc_conv_r53进行解包 使用touhouSE进行解包 使用DXEXTRACT进行解包 前言 Wolf RPG Editor由于其需要翻来覆去的转码,脚本名称等问题算是解包跟汉化中比 ...
- WD-线程KTHREAD结构(WRK)
线程是系统处理器调度的基本单元,而且线程调度是在内核层完成的,所以,KTHREAD 的许多域都跟Windows 的线程调度机制有关. 找到进程的线程可以使用!process 1 2 3 kd> ...
- ring3层一种占用文件的方法（DuplicateHandle以后，把占用文件的句柄丢给系统进程，导致被占用）
前段时间,一个测试工程师问我关于怎样长时间的占用一个文件,而使别的程序无法再访问这个文件,想起以前很多病毒木马经常劫持hosts文件不放,除非你找到占用文件的程序,并强行结束掉,否则怎么也访问不了ho ...
- windows pyspider WEB显示框太小解决方法
环境:windows7 + chrome + pyspider 解决方法: WEB预览框过小的原因在于页面元素的css属性height被替换为60px: CSS文件所在地方:C:\Users\Admi ...
- Java打印实心、空心的三角形和菱形
1.实心三角形 代码: import java.util.Scanner; public class Test { public static void main(String[] args) { i ...
- Laravel --- 要点笔记
一.路由: // 常规用法 Route::get('/',function(){ return 'get'; }) // 匹配多个 Route::match(['get','post'],'/',fu ...
- netty服务端启动--ServerBootstrap源码解析
netty服务端启动--ServerBootstrap源码解析 前面的第一篇文章中,我以spark中的netty客户端的创建为切入点,分析了netty的客户端引导类Bootstrap的参数设置以及启动 ...
- ios开发系列之内存泄漏分析（上）
ios自从引入ARC机制后,一般的内存管理就可以不用我们码农来负责了,但是一些操作如果不注意,还是会引起内存泄漏. 本文主要介绍一下内存泄漏的原理.常规的检测方法以及出现的常用场景和修改方法. 1. ...