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>