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>
?
