用CSS3 vh 简单实现DIV全屏居中
生活随笔
收集整理的這篇文章主要介紹了
用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>
?
轉載于:https://www.cnblogs.com/admans/p/11030226.html
總結
以上是生活随笔為你收集整理的用CSS3 vh 简单实现DIV全屏居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 这65条工作和成长建议，你将受用终生！
- 下一篇： P多行溢出省略号的处理