欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

設(shè)置一個(gè)DIV塊固定在屏幕中央的兩種方法(推薦)

  發(fā)布時(shí)間：2016-07-25 09:17:25   作者：佚名   我要評(píng)論
下面小編就為大家?guī)硪黄O(shè)置一個(gè)DIV塊固定在屏幕中央的兩種方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

方法一：

對(duì)一個(gè)div進(jìn)行以下設(shè)置即可實(shí)現(xiàn)居中。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. #a{   
  3.     position: fixed;   
  4.     top: 0px;   
  5.     left: 0px;   
  6.     rightright: 0px;   
  7.     bottombottom: 0px;   
  8.     margin: auto;   
  9. }   
  10. </style>  
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!doctype html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <style>  
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         #a{   
  12.             width: 200px;   
  13.             height: 200px;   
  14.             background-color: aquamarine;   
  15.             position: fixed;   
  16.             top: 0px;   
  17.             left: 0px;   
  18.             right: 0px;   
  19.             bottom: 0px;   
  20.             margin: auto;   
  21.         }   
  22.     </style>  
  23. </head>  
  24. <body>  
  25. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  26. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  27. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  28. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  29. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  30. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  31. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  32. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  33. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  34. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  35. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  36. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  37. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  38. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  39. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  40. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  41. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  42. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  43. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  44. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  45. <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
  46.     <div id="a">  
  47.         sdvcdvf   
  48.     </div>  
  49. </body>  
  50. </html>  

效果：

方法二：

使用js操作div的屬性為下面這樣即可實(shí)現(xiàn)居中。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2.    #a{   
  3.         width: 200px;   
  4.         height: 200px;   
  5.         background-color: aquamarine;   
  6.         position: fixed;   
  7.     }   
  8. </style>   
  9.   
  10. <script>   
  11.     window.onload=function(){   
  12.         var a = document.getElementById("a");//獲取div塊對(duì)象   
  13.         var Height=document.documentElement.clientHeight;//取得瀏覽器頁面可視區(qū)域的寬度   
  14.         var Width=document.documentElement.clientWidth;//取得瀏覽器頁面可視區(qū)域的寬度   
  15.         var gao1 = a.offsetHeight;//獲取div塊的高度值   
  16.         var gao2 = a.offsetWidth;//獲取div塊的寬度值   
  17.         var Sgao1= (Height - gao1)/2+"px";   
  18.         var Sgao2= (Width - gao2)/2+"px";   
  19.         a.style.top=Sgao1;   
  20.         a.style.left=Sgao2;   
  21.     }   
  22. </script>  

效果：

以上這篇設(shè)置一個(gè)DIV塊固定在屏幕中央的兩種方法(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/gaotenglong/archive/2016/07/24/5701434.html

相關(guān)文章

  • 關(guān)于div中img,span垂直居中的問題

    下面小編就為大家?guī)硪黄P(guān)于div中img,span垂直居中的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-09-26

  • 解決img在div中居中的問題

    下面小編就為大家?guī)硪黄鉀Qimg在div中居中的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-09-26

  • html5實(shí)現(xiàn)適用于手機(jī)端的div圖片放大預(yù)覽效果源碼

    這是一款html5實(shí)現(xiàn)適用于手機(jī)端的div圖片放大預(yù)覽效果源碼，共有4種不同的圖片放大預(yù)覽模式可供用戶選擇使用?？煞謩e針對(duì)鼠標(biāo)滑過、拖拽、點(diǎn)擊等進(jìn)行圖片放大顯示
    2016-09-21

  • DIV+CSS實(shí)現(xiàn)帶三角箭頭的提示框

    本文給大家?guī)硪欢未a基于div+css實(shí)現(xiàn)三角形提示框，代碼簡單易懂，需要的朋友可以參考下
    2016-09-20

  • div被iframe遮住的幾種情況及解決方法

    這篇文章給大家介紹了div被iframe遮住的一些情況，以及被遮住后的解決辦法，有需要的朋友們可以參考借鑒。
    2016-09-07

  • DIV點(diǎn)擊折疊實(shí)例代碼

    本文給大家?guī)硪欢魏诵拇a關(guān)于div點(diǎn)擊折疊效果，代碼簡單易懂，有需要的朋友可以參考下
    2016-08-31

  • DIV始終浮動(dòng)在頁面底部

    在頁面底部浮動(dòng)功能是如何實(shí)現(xiàn)的呢？下面小編給大家?guī)韉iv始終浮動(dòng)在頁面底部的關(guān)鍵代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
    2016-08-30

  • CSS設(shè)置DIV垂直居中的N種方法 兼容IE瀏覽器

    這篇文章主要為大家詳細(xì)介紹了兼容IE瀏覽器CSS設(shè)置DIV垂直居中的N種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-07-05

  • CSS文本和div垂直居中方法總結(jié)

    這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié)，包括多行文本垂直居中,單行文本垂直居中,子div垂直居中，感興趣的小伙伴們可以參考一下
    2016-07-04

  • CSS控制DIV層顯示和隱藏的實(shí)現(xiàn)方法

    本文給大家?guī)砹薈SS控制DIV層顯示和隱藏的方法，是前端學(xué)習(xí)必須要掌握的基礎(chǔ)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的小伙伴一起學(xué)習(xí)吧
    2016-07-01

最新評(píng)論