用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 程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时 ...
随机推荐
- 优雅实现INotifyPropertyChanged接口——利用Lambda表达式
原文:优雅实现INotifyPropertyChanged接口--利用Lambda表达式 参考文章 在14年的时候,曾经读过上面的参考文章,不过当时并没有怎么理解,慢慢地也就将这篇文章忘诸脑后了. 直 ...
- 创建 DLL 步骤 和 SRC
LIBRARY SimulationTouchDll EXPORTS MouseControl GetPosition //MouseControlInterface.def 文件 #pragma o ...
- siliverlight某些事件无法响应
对一些无法响应的时间,需要注册 控件名:XZWT_TreeViewItem 事件:this.XZWT_TreeViewItem_MouseLeftButtonDown 具体注册方法: XZWT_Tre ...
- C# 多进程安全
多个应用程序同时写入数据到一个文件中时可用 public void WriteData(string dataWh, string filePath) { EventWaitHandle waitHa ...
- UWP开发:获取用户当前所在的网络环境(WiFi、移动网络、LAN…)
原文:UWP开发:获取用户当前所在的网络环境(WiFi.移动网络.LAN-) UWP开发:获取用户当前所在的网络环境: 在uwp开发中,有时候,我们需要判断用户所在的网络,是WiFi,还是移动网络,给 ...
- UWP的TextBox和PasswordBox使用输入范围更改触摸键盘InputScope
原文:UWP的TextBox和PasswordBox使用输入范围更改触摸键盘InputScope 当你的应用运行在具有触摸屏的设备上时,触摸键盘可用于文本输入.当用户点击可编辑的输入字段(如 Text ...
- win7 64 下安装MyGeneration 遇到的问题解决方法
win7 64 下安装MyGeneration 遇到的问题 ---------------------------MyGeneration 1.3 Setup-------------------- ...
- [Leetcode]Single Number && Single Number II
Given an array of integers, every element appears twice except for one. Find that single one. 非常简单的一 ...
- xe5 for android 地理定位GPS
先上源码,在解释. implementation uses androidapi.jni.JavaTypes, androidapi.jni.Location, FMX.helpers.android ...
- Qt之QGraphicsEffect阴影、模糊效果
Qt之QGraphicsEffect阴影.模糊效果 Qt之QGraphicsEffect阴影模糊效果 效果图 阴影和模糊效果 正常效果 代码 customshadoweffecth customsha ...