用CSS3 vh 簡單實現DIV全屏居中

時間 2019-12-10

標籤 css3 css 簡單實現 div 全屏居中欄目 CSS 简体版

原文原文鏈接

vh、vw、vmin、vmax介紹

vw：視窗寬度的百分比（1vw 表明視窗的寬度爲 1%）
vh：視窗高度的百分比
vmin：當前 vw 和 vh 中較小的一個值
vmax：當前 vw 和 vh 中較大的一個值html

瀏覽器兼容性

（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）chrome

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。