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>

转载于:https://www.cnblogs.com/admans/p/11030226.html

用CSS3 vh 简单实现DIV全屏居中相关推荐

html中引用名言标签,CSS3 培根名人名言引用全屏居中样式设计
CSS 语言: CSSSCSS 确定 @charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=E ...
css3 移动端video视频全屏，横屏展示，适配微信/打包成app
参考链接: 全屏旋转 https://blog.csdn.net/nidunlove/article/details/51944527 ios进度条滑动方向判断 https://www.cnblogs ...
html生日快乐爆开烟花,css3+H5炫酷喜庆全屏烟花动画特效
css3+H5炫酷喜庆全屏烟花动画特效 /* basic styles for black background and crosshair cursor */ body { background: ...
CSS3实现图片在DIV中上下左右居中
CSS3实现图片在DIV中上下左右居中 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
html div全屏遮罩层,div遮罩层_Jquery全屏遮罩层DIV的实现代码
摘要腾兴网为您分享:Jquery全屏遮罩层DIV的实现代码,弈客围棋,壹学车,万科物业,万达普惠等软件知识,以及淘优优,天天爱学习,qq炫舞脚本,常熟农商银行网站,英文打字软件,抢工长,陌陌app, ...
简单实现 iframe 全屏显示
需求点击全屏按钮,让页面iframe全屏展示点击退出全屏按钮,让页面iframe退出全屏代码实现 HTML代码实现 <!doctype html> <html lang=&qu ...
js+css3简易实现2023新年快乐全屏满天星动画特效
目录 ⭐ 前言一.效果图二.代码实现 2.1 html 2.2 CSS 2.3. JS ⭐ 预览 ⭐ 前言 js+css3全屏星星闪烁背景2023新年快乐动画特效,文字还有3D立体效果.其中,利用 ...
一种简单实用的全屏方法
实现程序全屏幕显示的思路有很多种,最常见的一种就是: 1)利用Windows API提供的一个结构体WINDOWPLACEMENT来存储全屏显示前视图和主框架窗口在屏幕上的位置和显示信息.非客户区窗口 ...
html九宫图div满屏居中,九宫格+DIV水平居中+div垂直居中+div内部文本居中+div内div居中...
有很多网页初手,对网页的 DIV+CSS布局不很精通,我现将常用的几个东西制作在一起, 以方便您使用. 学会了这一个,就可以对 html的盒子模型有更深的了解九宫格 DIV水平居中+div垂直居中 ...

用CSS3 vh 简单实现DIV全屏居中

vh、vw、vmin、vmax介绍

浏览器兼容性

（1）桌面 PC

（2）移动设备

用CSS3 vh 简单实现DIV全屏居中相关推荐

最新文章

热门文章