設(shè)置一個DIV塊固定在屏幕中央的兩種方法(推薦)
發(fā)布時間:2016-07-25 09:17:25 作者:佚名
我要評論

下面小編就為大家?guī)硪黄O(shè)置一個DIV塊固定在屏幕中央的兩種方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
方法一:
對一個div進(jìn)行以下設(shè)置即可實現(xiàn)居中。
CSS Code復(fù)制內(nèi)容到剪貼板
- <style>
- #a{
- position: fixed;
- top: 0px;
- left: 0px;
- rightright: 0px;
- bottombottom: 0px;
- margin: auto;
- }
- </style>
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!doctype html>
- <html lang="zh-cn">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- *{
- margin: 0px;
- padding: 0px;
- }
- #a{
- width: 200px;
- height: 200px;
- background-color: aquamarine;
- position: fixed;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- margin: auto;
- }
- </style>
- </head>
- <body>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
- <div id="a">
- sdvcdvf
- </div>
- </body>
- </html>
效果:
方法二:
使用js操作div的屬性為下面這樣即可實現(xiàn)居中。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <style>
- #a{
- width: 200px;
- height: 200px;
- background-color: aquamarine;
- position: fixed;
- }
- </style>
- <script>
- window.onload=function(){
- var a = document.getElementById("a");//獲取div塊對象
- var Height=document.documentElement.clientHeight;//取得瀏覽器頁面可視區(qū)域的寬度
- var Width=document.documentElement.clientWidth;//取得瀏覽器頁面可視區(qū)域的寬度
- var gao1 = a.offsetHeight;//獲取div塊的高度值
- var gao2 = a.offsetWidth;//獲取div塊的寬度值
- var Sgao1= (Height - gao1)/2+"px";
- var Sgao2= (Width - gao2)/2+"px";
- a.style.top=Sgao1;
- a.style.left=Sgao2;
- }
- </script>
效果:
以上這篇設(shè)置一個DIV塊固定在屏幕中央的兩種方法(推薦)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
原文地址:http://www.cnblogs.com/gaotenglong/archive/2016/07/24/5701434.html
相關(guān)文章
- 下面小編就為大家?guī)硪黄P(guān)于div中img,span垂直居中的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-26
- 下面小編就為大家?guī)硪黄鉀Qimg在div中居中的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-26
html5實現(xiàn)適用于手機(jī)端的div圖片放大預(yù)覽效果源碼
這是一款html5實現(xiàn)適用于手機(jī)端的div圖片放大預(yù)覽效果源碼,共有4種不同的圖片放大預(yù)覽模式可供用戶選擇使用??煞謩e針對鼠標(biāo)滑過、拖拽、點擊等進(jìn)行圖片放大顯示2016-09-21- 本文給大家?guī)硪欢未a基于div+css實現(xiàn)三角形提示框,代碼簡單易懂,需要的朋友可以參考下2016-09-20
- 這篇文章給大家介紹了div被iframe遮住的一些情況,以及被遮住后的解決辦法,有需要的朋友們可以參考借鑒。2016-09-07
- 本文給大家?guī)硪欢魏诵拇a關(guān)于div點擊折疊效果,代碼簡單易懂,有需要的朋友可以參考下2016-08-31
- 在頁面底部浮動功能是如何實現(xiàn)的呢?下面小編給大家?guī)韉iv始終浮動在頁面底部的關(guān)鍵代碼,非常不錯,具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧2016-08-30
CSS設(shè)置DIV垂直居中的N種方法 兼容IE瀏覽器
這篇文章主要為大家詳細(xì)介紹了兼容IE瀏覽器CSS設(shè)置DIV垂直居中的N種方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-05- 這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié),包括多行文本垂直居中,單行文本垂直居中,子div垂直居中,感興趣的小伙伴們可以參考一下2016-07-04
- 本文給大家?guī)砹薈SS控制DIV層顯示和隱藏的方法,是前端學(xué)習(xí)必須要掌握的基礎(chǔ)知識,非常不錯,具有參考借鑒價值,感興趣的小伙伴一起學(xué)習(xí)吧2016-07-01